[BUG] Attempted import error: 'animejs' does not contain a default export
I'm attempting to use animejs in a NextJS project and I'm getting a error on compile "Attempted import error: 'animejs' does not contain a default export (imported as 'anime')" and an error on run "Error: (0 , animejs__WEBPACK_IMPORTED_MODULE_3__.default) is not a function".
My use is pretty simple and I have installed anime using NPM install with animejs in my package.json.
The code in the site that imports and uses the library:
import anime from 'animejs';
and then uses it
useEffect(() => {
anime({
targets: titleRef.current,
opacity: [0, 1],
translateY: [20, 0],
duration: 800,
easing: "easeOutQuad",
delay: 300,
})
anime({
targets: descRef.current,
opacity: [0, 1],
translateY: [20, 0],
duration: 800,
easing: "easeOutQuad",
delay: 500,
})
anime({
targets: ".news-card",
opacity: [0, 1],
translateY: [20, 0],
duration: 800,
delay: (el, i) => 700 + i * 150,
easing: "easeOutQuad",
})
}, [])
I have tried a number of other import methods at this point and forcing npm to manually install without success.
Realized this morning that in the V4 upgrade anime had been replaced by animate. Unfortunately, changing this did not fix the issue and it is still throwing the default error above.
Realized this morning that in the V4 upgrade anime had been replaced by animate. Unfortunately, changing this did not fix the issue and it is still throwing the default error above.
The code you posted above is from the v3, it needs to be ported to v4 by following the [migration guide].(https://github.com/juliangarnier/anime/wiki/Migrating-from-v3-to-v4)
- import anime from 'animejs';
+ import { animate } from 'animejs';
Thanks!