SyntaxError: Unexpected token 'export' export default anime; ^^^^^^

[alinafatima]

Describe the bug
I get the following bug when I reload my page from the Next App:

error - /Users/alinafatima/Desktop/alina/test/test/node_modules/animejs/lib/anime.es.js:1310
export default anime;
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1166:20)
    at Module._compile (node:internal/modules/cjs/loader:1210:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1300:10)
    at Module.load (node:internal/modules/cjs/loader:1103:32)
    at Module._load (node:internal/modules/cjs/loader:942:12)
    at Module.require (node:internal/modules/cjs/loader:1127:19)
    at require (node:internal/modules/helpers:112:18)
    at animejs/lib/anime.es.js (/Users/alinafatima/Desktop/alina/test/test/.next/server/pages/index.js:43:18)
    at __webpack_require__ (/Users/alinafatima/Desktop/alina/test/test/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/index.tsx:11:81)
    at ./pages/index.tsx (/Users/alinafatima/Desktop/alina/test/test/.next/server/pages/index.js:32:1)
    at __webpack_require__ (/Users/alinafatima/Desktop/alina/test/test/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/Users/alinafatima/Desktop/alina/test/test/.next/server/pages/index.js:75:39)
    at /Users/alinafatima/Desktop/alina/test/test/.next/server/pages/index.js:76:28
    at Object.<anonymous> (/Users/alinafatima/Desktop/alina/test/test/.next/server/pages/index.js:79:3)
    at Module._compile (node:internal/modules/cjs/loader:1246:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1300:10)
    at Module.load (node:internal/modules/cjs/loader:1103:32)
    at Module._load (node:internal/modules/cjs/loader:942:12)
    at Module.require (node:internal/modules/cjs/loader:1127:19)
    at require (node:internal/modules/helpers:112:18)
    at Object.requirePage (/Users/alinafatima/Desktop/alina/test/test/node_modules/next/dist/server/require.js:88:12)
    at /Users/alinafatima/Desktop/alina/test/test/node_modules/next/dist/server/load-components.js:49:73
    at async Object.loadComponentsImpl [as loadComponents] (/Users/alinafatima/Desktop/alina/test/test/node_modules/next/dist/server/load-components.js:49:26)
    at async DevServer.findPageComponentsImpl (/Users/alinafatima/Desktop/alina/test/test/node_modules/next/dist/server/next-server.js:600:36) {
  page: '/'
}

To Reproduce
Steps to reproduce the behavior:

npx create-next-app@latest --typescript

npm install animejs --save

npm i --save-dev @types/animejs

Add the following code:

import anime from "animejs/lib/anime.es.js";
anime({
    targets: "div",
    translateX: 250,
    rotate: "1turn",
    backgroundColor: "#FFF",
    duration: 800,
  });

The code runs fine when I add and save the code. The error occurs when I reload the page.

Expected behavior
There should be no error.

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome

Next version:

"next": "13.2.4",

Anime.js

 "animejs": "^3.2.1",
 "@types/animejs": "^3.1.7",

[Yukiniro]

import anime from "animejs/lib/anime.es.js"; -> import anime from "animejs"

animejs/lib/anime.es.js was identified as commonjs. So you should use import anime from "animejs".

[alinafatima]

It's resolved now!!Thanks @Yukiniro!

Replace import anime from "animejs/lib/anime.es.js" with import anime from "animejs",

and the anime is code has to be put into useEffect

useEffect(() => {
    anime({
      loop: true,
      targets: "#gear1 path",
      rotate: 360,
      easing: "linear",
    });
  }, []);