Error when I reload my Next.js app using animejs: SyntaxError: Unexpected token 'export' This error happened while generating the page

Question

Error when I reload my Next.js app using animejs:

SyntaxError: Unexpected token 'export' This error happened while generating the page.

file:///Users/.../node_modules/animejs/lib/anime.es.js (1310)

This is how I am importing anime.js:

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

...
const GLOBAL_CFG = {
    loop: true,
  };

  const GEAR1 = anime({
    loop: true,
    targets: "#gear1 path",
    rotate: 360,
    easing: "linear",
  });

  const GEAR2 = anime({
    ...GLOBAL_CFG,
    targets: "#gear2 path",
    rotate: -360,
    easing: "linear",
  });

I am using TypeScript. Here's my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "globals.d.ts"],
  "exclude": ["node_modules"]
}

Here's my .babelrc:

{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
}

Next version:

"next": "13.2.4",

Anime.js

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

The code works fine when I write and save it. This error occurs when I reload the page. I am a bit new to Next.js and TypeScript. Any help would be appreciated.

Answer 1

I resolved this issue by the following:

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

and the anime code has to be put into useEffect

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