react-spring: [bug]: ESM failed to resolve with Webpack

Which react-spring target are you using?

@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.0

What’s Wrong?

ERROR in ./node_modules/@react-spring/core/dist/index.mjs 1596:0-45

Module not found: Error: Can’t resolve ‘@react-spring/types/animated’ in ‘…/my-app/node_modules/@react-spring/core/dist’ Did you mean ‘animated.js’? BREAKING CHANGE: The request ‘@react-spring/types/animated’ failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a ‘.mjs’ file, or a '.js’ file where the package.json contains ‘“type”: “module”’). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

To Reproduce

Code running locally has an error

Expected Behaviour

no error

Link to repo

https://codesandbox.io/s/bold-mahavira-y26di2?file=/src/App.js

About this issue

Original URL
State: closed
Created a year ago
Reactions: 7
Comments: 37 (16 by maintainers)

Commits related to this issue

fix(general): better deps - Cleanup unused (recompose & doc-tools/components) - Move dev dependencies like gulp to devDependencies - Add UI lib dependencies (UIKit) to peerDependencies and devDepende... — committed to gravity-ui/blog-constructor by DC-RomanKarpov a year ago
Comeon, webpack https://github.com/pmndrs/react-spring/issues/2097#issuecomment-1443395326 — committed to NullVoxPopuli/embroider by NullVoxPopuli a year ago

Most upvoted comments

I’ve just published 9.7.1.

I’d like to thank you all for the help & patience in resolving this issue, and i’d also like to apologise that this happened.

joshuaellis on Feb 27, 2023

Isn’t this the issue – https://github.com/facebook/create-react-app/issues/11865? While I understand the react-spring has caused the break the fault lies with CRA. Our ESM / CJS implementation was incorrect so it’s been fixed properly… 🤔

The solution it seems whilst i’m not sure how you would do it, is to add:

{
  test: /\.m?js/,
  resolve: {
    fullySpecified: false
  }
}

to your webpack configuration…

joshuaellis on Feb 24, 2023

New experimental release that I believe should work – 0.0.0-40ac9039be0c657954e31ea7588bee4abbf1df1f-20230227081728 if people are interested in trying it out need more verification it works in the wild! 🤞🏼

joshuaellis on Feb 27, 2023

@bpinto Can you post your final solve ? Im also having this issue and cant get my webpack configured correctly.

joepuzzo on Feb 24, 2023

Indeed my problem came from there, here is my solution Thanks for your help

const path = require('path');

module.exports = {
    webpack: {
        alias: {
            '@': path.resolve(__dirname, './src'),
        },
        configure: {
            module: {
                rules: [
                    {
                        test: /\.m?js/,
                        resolve: {
                            fullySpecified: false
                        }
                    },
                ],
            },
        }
    },
};

loic-huart on Feb 24, 2023

Working for me as well 👍 Thank you! 🙇

bpinto on Feb 27, 2023

With 0.0.0-40ac9039be0c657954e31ea7588bee4abbf1df1f-20230227081728 local build was fixed 🕺

evamalininaa on Feb 27, 2023

That didn’t work on my testing, when I look at what files the package has locally, it is missing the dist folder:

docker@542d49841994:/src/app$ ls -lah node_modules/@react-spring/web/
total 20K
drwxr-xr-x 2 docker docker 4.0K Feb 26 15:47 .
drwxr-xr-x 8 docker docker 4.0K Feb 26 15:47 ..
-rw-r--r-- 1 docker docker 1.1K Feb 26 15:47 LICENSE
-rw-r--r-- 1 docker docker   41 Feb 26 15:47 README.md
-rw-r--r-- 1 docker docker 1.4K Feb 26 15:47 package.json

As you can see the package is using the correct version:

docker@a2a59dbbe706:/src/app$ cat node_modules/@react-spring/web/package.json
{
  "name": "@react-spring/web",
  "version": "0.0.0-aefd1e584376be38b1f6ca1ca74e061c4ce9b9d8-20230225174818",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    },
    "./package.json": "./package.json"
  },
  "files": [
    "dist/*",
    "README.md",
    "LICENSE"
  ],
  "repository": "pmndrs/react-spring",
  "homepage": "https://github.com/pmndrs/react-spring#readme",
  "keywords": [
    "animated",
    "animation",
    "hooks",
    "motion",
    "react",
    "react-native",
    "spring",
    "typescript",
    "velocity"
  ],
  "license": "MIT",
  "author": "Paul Henschel",
  "maintainers": [
    "Josh Ellis (https://github.com/joshuaellis)"
  ],
  "dependencies": {
    "@react-spring/animated": "0.0.0-aefd1e584376be38b1f6ca1ca74e061c4ce9b9d8-20230225174818",
    "@react-spring/core": "0.0.0-aefd1e584376be38b1f6ca1ca74e061c4ce9b9d8-20230225174818",
    "@react-spring/shared": "0.0.0-aefd1e584376be38b1f6ca1ca74e061c4ce9b9d8-20230225174818",
    "@react-spring/types": "0.0.0-aefd1e584376be38b1f6ca1ca74e061c4ce9b9d8-20230225174818"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "scripts": {
    "build": "tsup",
    "dev": "tsup"
  }
}

You can also confirm this via npmjs Code tab.

Thanks for that catch. Looks like the experimental release workflow wasn’t building 🤦🏼‍♀️ back on this issue this AM 😃

joshuaellis on Feb 27, 2023

That didn’t work on my testing, when I look at what files the package has locally, it is missing the dist folder:

docker@542d49841994:/src/app$ ls -lah node_modules/@react-spring/web/
total 20K
drwxr-xr-x 2 docker docker 4.0K Feb 26 15:47 .
drwxr-xr-x 8 docker docker 4.0K Feb 26 15:47 ..
-rw-r--r-- 1 docker docker 1.1K Feb 26 15:47 LICENSE
-rw-r--r-- 1 docker docker   41 Feb 26 15:47 README.md
-rw-r--r-- 1 docker docker 1.4K Feb 26 15:47 package.json

As you can see the package is using the correct version:

docker@a2a59dbbe706:/src/app$ cat node_modules/@react-spring/web/package.json
{
  "name": "@react-spring/web",
  "version": "0.0.0-aefd1e584376be38b1f6ca1ca74e061c4ce9b9d8-20230225174818",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    },
    "./package.json": "./package.json"
  },
  "files": [
    "dist/*",
    "README.md",
    "LICENSE"
  ],
  "repository": "pmndrs/react-spring",
  "homepage": "https://github.com/pmndrs/react-spring#readme",
  "keywords": [
    "animated",
    "animation",
    "hooks",
    "motion",
    "react",
    "react-native",
    "spring",
    "typescript",
    "velocity"
  ],
  "license": "MIT",
  "author": "Paul Henschel",
  "maintainers": [
    "Josh Ellis (https://github.com/joshuaellis)"
  ],
  "dependencies": {
    "@react-spring/animated": "0.0.0-aefd1e584376be38b1f6ca1ca74e061c4ce9b9d8-20230225174818",
    "@react-spring/core": "0.0.0-aefd1e584376be38b1f6ca1ca74e061c4ce9b9d8-20230225174818",
    "@react-spring/shared": "0.0.0-aefd1e584376be38b1f6ca1ca74e061c4ce9b9d8-20230225174818",
    "@react-spring/types": "0.0.0-aefd1e584376be38b1f6ca1ca74e061c4ce9b9d8-20230225174818"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "scripts": {
    "build": "tsup",
    "dev": "tsup"
  }
}

You can also confirm this via npmjs Code tab.

bpinto on Feb 26, 2023

Seems like there’s a solution – i’m gonna close this issue but also pin it so others will see it if they have the problem.

Thanks for all the responsiveness, sorry there’s nothing I can do this side.

joshuaellis on Feb 24, 2023

Please stop saying you’re getting the error and not providing a reproduction – it’s really unhelpful and doesn’t make anything happen quicker.

joshuaellis on Feb 24, 2023