Question

我在React + Next.js项目中使用React-Block-Reveal-Animation。它仅在React项目中可以正常工作，但在React + Next中会出现此错误。

Invalid or unexpected token
E:\Projects\nextjs\Website\node_modules\react-block-reveal-animation\dist\BlockRevealAnimation.css:1
(function (exports, require, module, __filename, __dirname) { @keyframes move {
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (E:\Projects\nextjs\Website\node_modules\react-block-reveal-animation\dist\BlockRevealAnimation.js:15:1)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoa`enter code here`d (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)

import React from 'react';
import BlockRevealAnimation from 'react-block-reveal-animation';
const BlockAnimation = () => (
    <div id="rev-6 Tilt-inner" >
          <BlockRevealANimation>
             <img src="static/images/dew-ban.jpg" alt="dew-ban" data-tilt />
          </BlockRevealANimation>
     </div>
)
export default BlockAnimation

Complete error screenshot

Answer 1

接下来似乎要尝试从“ react-block-reveal-animation”模块中导入和使用.css文件。

我猜你没有在next.config.js中实现CSS处理器

像这样：

-DOpenCV_DIR=</path/to/configfile>

您可以更好地解释here

@Keyframs move {SyntaxError：使用react-block-reveal-animation React + Next.js时出现无效或意外令牌

1 个答案: