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.
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",
});
}, []);