Comments (2)
justin-schroeder
commented on August 22, 2024
4
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!
from auto-animate.
zaynbuksh
commented on August 22, 2024
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"; // hookimport autoAnimate from "@formkit/auto-animate"; // without hook
Calling code attempts
const [examplesContainer ] = useAutoAnimate(); // hookconst examplesContainer = useRef(null);andautoAnimate(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"
},
from auto-animate.
Related Issues (20)
- Inconsistent jumping inside flex item HOT 1
- Not working HOT 4
- Vue Virtual Scroller
- Wrong arguments order in AutoAnimationPlugin declaration
- Animate across lists? Across all elements inside a `ul`?
- How should I use fixed centering layout? HOT 1
- Incorrect rounding of element sizes while animating HOT 2
- When the page is refreshed, the component has no animation.
- Vue useAutoAnimate not working with v-if
- does not provide an export named 'autoAnimate'
- Animation starting coords are buggy when the container has transitioned positions
- How to add auto-animate to custom components (NuxtUI) HOT 1
- Headless UI + Auto-Animate | Issue with auto-animate conflicting HOT 1
- nuxt3 3.10.3 does not provide an export named 'autoAnimate' HOT 1
- I added the element from the front but the animation still appears from the last one HOT 1
- React.Children.map issue HOT 1
- How to animate single element? HOT 3
- The compatibility of TR tags is a bit difficult to use, and the TR animation effect has become distorted
- CDN support ?? HOT 1
- There's no decorators for the angular imports
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from auto-animate.