@Keyframs move { SyntaxError: Недопустимый или неожиданный токен при использовании анимации React + Next.js

Я использую 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

Полный скриншот ошибки

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
295
1

Ответы 1

Похоже, следующая попытка импортировать и использовать файл .css из модуля «react-block-reveal-animation».

Я думаю, вы не реализовали процессор css в next.config.js

нравится:

const withCSS = require('@zeit/next-css')

module.exports = compose([[withCSS]])

у вас может быть лучшее объяснение здесь

Да, я использовал следующий css. а также добавил это тоже. // next.config.js const withCSS = require('@zeit/next-css') module.exports = withCSS()

jay sheth 14.02.2019 09:17

попробуйте импортировать файл css в тот же файл js и посмотрите, не выдает ли он ошибку

elad BA 14.02.2019 09:24

css берется из файла node_modules во время выполнения.

jay sheth 14.02.2019 09:28

Другие вопросы по теме