Module not found: Error

[hectordommo]

Having this error at build:

Module not found: Error: Package path ./react is not exported from package /Users/[path_to_project]/node_modules/@formkit/auto-animate (see exports field in /Users/[path_to_project]/node_modules/@formkit/auto-animate/package.json)

• React 17
• Webpack builder Using Laravel Mix
• Typescript 4.7.4
• Library is installed as "@formkit/auto-animate": "^1.0.0-beta.1"

[zaynbuksh]

Hi team,

I'm getting the same error, details below.

Error

Without react hook

Module not found: Error: Package path . is not exported from package <path>/node_modules/@formkit/auto-animate (see exports field in <path>/node_modules/@formkit/auto-animate/package.json)

With react hook

Module not found: Error: Package path ./react is not exported from package <path>/node_modules/@formkit/auto-animate (see exports field in <path>/node_modules/@formkit/auto-animate/package.json)

My setup

• React version 17
• Compiled by Webpack (via the tooling provided by Bit)
• Version is beta.3

Import attempts

• import { useAutoAnimate } from "@formkit/auto-animate/react"; // hook
• import autoAnimate from "@formkit/auto-animate"; // without hook

Calling code attempts

• const [examplesContainer ] = useAutoAnimate(); // hook
• const examplesContainer = useRef(null); and autoAnimate(examplesContainer.current); // without hook

Error screenshot

The module and default keys in exports might have something to do with?

When I compare your exports vs the exports for something that doesn't generate the error (e.g. emotion), the structure is somewhat different.

Auto-animate's exports in package.json

  "exports": {
    "./vue": {
      "import": "./vue/index.mjs",
      "types": "./vue/index.d.ts"
    },
    "./react": {
      "import": "./react/index.mjs",
      "types": "./react/index.d.ts"
    },
    "./angular": {
      "import": "./angular/index.mjs",
      "types": "./angular/index.d.ts"
    },
    ".": {
      "import": "./index.mjs"
    }
  },

Emotion's exports in package.json

"exports": {
    ".": {
      "module": {
        "worker": "./dist/emotion-react.worker.esm.js",
        "browser": "./dist/emotion-react.browser.esm.js",
        "default": "./dist/emotion-react.esm.js"
      },
      "default": "./dist/emotion-react.cjs.js"
    },
    "./jsx-runtime": {
      "module": {
        "worker": "./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js",
        "browser": "./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js",
        "default": "./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js"
      },
      "default": "./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js"
    },
    "./_isolated-hnrs": {
      "module": {
        "worker": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js",
        "browser": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js",
        "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js"
      },
      "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js"
    },
    "./jsx-dev-runtime": {
      "module": {
        "worker": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js",
        "browser": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js",
        "default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js"
      },
      "default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js"
    },
    "./package.json": "./package.json",
    "./types/css-prop": "./types/css-prop.d.ts",
    "./macro": "./macro.js"
  },

[justin-schroeder]

I could be wrong about this — but there seems to be a common thread when people encounter this issue. Typically the build tool is a bit older (like webpack 4) and doesn't like .mjs files. AutoAnimate as of right now is ESM only, we don't plan to ship any CJS (we're ok with some rough edges if it helps move the ecosystem along a bit — better for the environment you could say 😂).

That said — if there is some way we could write the export map to allow these older bundlers to actually work without shipping CJS I'm in!