Cannot import react-anime

[jwl-7]

Importing react-anime results in: SyntaxError: Cannot use import statement outside a module

Import statements used:

import Anime, { anime } from 'react-anime'
or
import Anime from 'react-anime'

Trying out the latest package on npm using RunKit results in the same error: https://npm.runkit.com/react-anime

I am using Next.js with JavaScript.

EDIT: I ended up fixing this issue by using Next.JS Dynamic Imports. I believe it has to do with how the 'window' element is undefined in the development environment.

Here is the import statement I used to fix the issue:

import dynamic from 'next/dynamic'
const Anime = dynamic(() => import('react-anime'), {ssr: false})

[DarioLopes]

You saved me for this one! Do you know how to import "anime" though? Like "anime.stagger(100)"

Anyway thanks

Edit: Well, nothing seems to work on an almost fresh install, I got to Framer Motion instead, what a relief!

[timfee]

@DarioLopes you can just use the vanilla import for access to anime -- like so:

const Anime = dynamic(() => import('react-anime'), { ssr: false })
import anime from 'animejs'

<Anime opacity={[0, 1]} translateY={'1em'} delay={anime.stagger(500)}>
   <p>hello world</p>
</Anime>

[DarioLopes]

@timfee Oh well, thank you, I'll give it a try!

[timfee]

@DarioLopes good luck! FWIW, I ended up just using animejs directly:

  const ref = createRef<HTMLDivElement>()

  useEffect(() => {
    if (ref.current)
      anime({
        targets: ref.current.children,
        delay: anime.stagger(130),
        translateY: '0.5em',
        opacity: [0, 1],
        duration: 500
      })
  }, [ref])

   <div ref={ref}>
     <p>hello world</p>
     <p>goodbye world</p>
   </div>