Я использую React-Block-Reveal-Animation в проекте React + Next.js. Он отлично работает только в проекте 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




Похоже, следующая попытка импортировать и использовать файл .css из модуля «react-block-reveal-animation».
Я думаю, вы не реализовали процессор css в next.config.js
нравится:
const withCSS = require('@zeit/next-css')
module.exports = compose([[withCSS]])
у вас может быть лучшее объяснение здесь
попробуйте импортировать файл css в тот же файл js и посмотрите, не выдает ли он ошибку
css берется из файла node_modules во время выполнения.
Да, я использовал следующий css. а также добавил это тоже.
// next.config.js const withCSS = require('@zeit/next-css') module.exports = withCSS()