[bug]: When included in a module, react-spring resolves to the string "/static/media/react-spring_web.development.34d7028f586cc8ee5e8e.cjs"

danny-does-stuff commented 1 year ago

Which react-spring target are you using?

[X] @react-spring/web
[ ] @react-spring/three
[ ] @react-spring/native
[ ] @react-spring/konva
[ ] @react-spring/zdog

What version of react-spring are you using?

9.7.3

What's Wrong?

I have a project B that is released as a private package that depends on @react-spring/web. When project B is included in project A, a create-react-app app, the whole site fails to load since the value imported from @react-spring/web is just the string "/static/media/react-spring_web.development.34d7028f586cc8ee5e8e.cjs" instead of an object with all of the usual exports (animated, config, useSpring, etc). To be clear, A depends on B, and B depends on @react-spring/web. A also depends on the same version of @react-spring/web

The actual error is Uncaught TypeError: Cannot read properties of undefined (reading 'svg') when trying to read _web.animated.svg This error happens on this line that is trying to make a styled-component

I would think that this issue is due to my setup in project B, but react-spring seems to be the only package in node_modules that has this problem. You can see that the imported values for react and styled-components are both the complete modules

To Reproduce

Add @react-spring/web to a package and use it

babel build the package and release it

// .babelrc
{
"presets": [
    ["@babel/preset-env", { "targets": "defaults" }],
    ["@babel/preset-flow", { "all": true }],
    "@babel/preset-react"
],
"ignore": ["**/moduleDefinitions.js"],
"plugins": ["babel-plugin-styled-components"]
}

import the package into a CRA app
Sadness

Expected Behaviour

I expect the value imported from react-spring to be the react-spring module with the usual properties like useSpring, animated, etc, and not a string. I'm wondering if this is a cjs/esm issue.

Link to repo

Unfortunately I'm not familiar enough with npm to make a repro. I'm happy to jump on a video call though to show you the issue because I understand the value of seeing an issue first hand!

joshuaellis commented 1 year ago

You've probably not bundled your library correctly and there's nothing I can do to solve this unfortunately, if you share a repo I might be able to advise but without one there's nothing to do on our side with this issue.

danny-does-stuff commented 1 year ago

Thanks for the feedback. This appears to be an issue with create-react-app when using require to get a .cjs file. This doesn't usually show up since as a user of CRA you generally would import @react-spring/web using import, not require. But in this case, since package B is transpiled with Babel as many packages are, it was using require and CRA's webpack config would choke. Here is the relevant issue https://github.com/facebook/create-react-app/issues/11889. My fix was to use craco as was suggested in this comment

pmndrs / react-spring