auto-animate React hook fails to compile

In a CRA running React 17 attempting to use the react hook import { useAutoAnimate } from '@formkit/auto-animate/react' results in the following error:

Failed to compile.

./node_modules/@formkit/auto-animate/react/index.mjs
Can't import the named export 'useEffect' from non EcmaScript module (only default export is available)

Not using the hook, and just using the autoAnimate function in a useEffect does however work

May 23 '22 15:05 kel89

Good point — I think this is because React 17 isn't really ESM compliant.

May 23 '22 16:05 justin-schroeder

Yes I had the exact same issue and couldn't use the hook. I just followed the basic example in the docs with useRef and it worked for me. Would be nice to be able to import the hook though.

May 26 '22 05:05 lingdocs

Are both of these on React 17?

May 31 '22 13:05 justin-schroeder

same issue with react 16 😅

Jun 02 '22 06:06 damienromito

Same issue react 18 😅😅

Jul 30 '22 18:07 ethansnow2012

My Quick Fix: Instead of importing from ""@formkit\auto-animate\react", direct copy and paste it into your own codebase.

Jul 30 '22 18:07 ethansnow2012

Im also having this issue

Aug 24 '22 21:08 CarelessCourage

FWIW — I believe these issues are generally related to older bundlers that do not support native ESM imports and need a common js fallback. We don't currently ship a CJS bundle (and likely wont) since these older bundlers are quickly being replaced by ESM compatible build chains like Vite. If I'm wrong about this, and there's a way to get native ESM modules working by tweaking the export map, I think we'd be happy to get that merged in.

Aug 25 '22 12:08 justin-schroeder

Hello,

I use on webpack this configuration and it's works !

    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    });

:)

Sep 18 '22 13:09 DamienGilbrin