[bug]: ESM failed to resolve with Webpack #2097

zkylearner · 2023-02-24T08:01:33Z

Which react-spring target are you using?

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

The text was updated successfully, but these errors were encountered:

joshuaellis · 2023-02-24T08:11:01Z

I cant see an error in the reproduction?

joshuaellis · 2023-02-24T08:46:00Z

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

nongtiny · 2023-02-24T09:14:59Z

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

I'm sorry. What kind of reproduction do you want to see?

For the test URL, I can't build the reproduction for you because When I do react-scripts build, it has this error also. Build is failed.

I'm not sure if this can help you, but the @react-spring/types has an update last 13 hours ago. I don't know that this might be the case or not. ref: https://www.npmjs.com/package/@react-spring/types?activeTab=versions

Node version: 16.17.1

My dependencies

"dependencies": {
    "@headlessui/react": "1.7.10",
    "@react-spring/types": "9.6.1",
    "@react-spring/web": "9.7.0",
    "@react-three/drei": "9.43.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@use-gesture/react": "^10.2.22",
    "autoprefixer": "^10.4.13",
    "axios": "^1.2.4",
    "camera-controls": "^1.37.4",
    "leva": "^0.9.34",
    "lodash": "^4.17.21",
    "postcss": "^8.4.19",
    "react": "^18.2.0",
    "react-custom-scrollbars-2": "^4.5.0",
    "react-dom": "^18.2.0",
    "react-loader-spinner": "^5.3.4",
    "react-router-dom": "^6.4.4",
    "react-scripts": "5.0.1",
    "react-three-fiber": "6.0.13",
    "reactjs-popup": "^2.0.5",
    "tailwindcss": "^3.2.4",
    "three": "0.146.0",
    "web-vitals": "^2.1.4"
  },

joshuaellis · 2023-02-24T09:23:05Z

@nongtiny, sounds like you're using CRA? So perhaps just a github repo that has CRA and @react-spring/web installed and trying to do "something" will be enough – appreciate because it's CRA it might not be possible with codesandbox.

nongtiny · 2023-02-24T09:32:52Z

Yes I'm using CRA.

Is there any workaround to avoid or fix this problem? @joshuaellis

Will do a Repo for you soon.

joshuaellis · 2023-02-24T09:35:50Z

Yes I'm using CRA.

Is there any workaround to avoid or fix this problem? @joshuaellis

Will do a Repo for you soon.

It seems an issue with CRA's webpack configuration. This follows specs on delivering ESM & CJS so i'm not totally sure to be honest.

nongtiny · 2023-02-24T09:49:53Z

@joshuaellis

Here you go https://github.com/nongtiny/test-cra-reactspring-issue/tree/main

Thanks a lot for your fast reply and support!

joshuaellis · 2023-02-24T10:01:00Z

Isn't this the issue – facebook/create-react-app#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...

loic-huart · 2023-02-24T10:05:50Z

I have already tried this configuration in my craco.config.js file without success

const path = require('path');

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

joshuaellis · 2023-02-24T10:12:59Z

@LoicHuart I don't think that's how you do it is it? Have you looked at the documentation? https://craco.js.org/docs/configuration/webpack/

bpinto · 2023-02-24T10:19:06Z

@joshuaellis that indeed solves the problem. Does that mean that the distributed .mjs file is not using fully specified path and so webpack is not able to find the file?

What I haven't been able to understand yet is why webpack is using .mjs file by default instead of .js...

Update: Maybe that's standard, I just haven't confirmed that via docs yet.

joshuaellis · 2023-02-24T10:21:35Z

@joshuaellis that indeed solves the problem. Does that mean that the distributed .mjs file is not using fully specified path and so webpack is not able to find the file?

What I haven't been able to understand yet is why webpack is using .mjs file by default instead of .js...

I'll be honest, not totally sure! It works well with all the other bundlers 🤷🏼‍♀️

loic-huart · 2023-02-24T10:25:24Z

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
                        }
                    },
                ],
            },
        }
    },
};

joshuaellis · 2023-02-24T10:34:22Z

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.

chenxsan · 2023-02-24T12:15:48Z

Just ran into this problem in an ESM project. The problem here is webpack requires import/exports in esm files to specify the extension due to the enabled resolve.fullySpecified, though some other bundlers might permit it without the extension.

In my case, here's the code causing the problem https://github.com/pmndrs/react-spring/blob/master/packages/core/src/index.ts#L25-L26

export * from '@react-spring/types/animated'
export * from '@react-spring/types/interpolation'

Which I believe can be fixed by appending the .js extension:

export * from '@react-spring/types/animated.js'
export * from '@react-spring/types/interpolation.js'

@joshuaellis Would u accept a pull request to fix it?

Btw, I believe the right workaround in webpack is as below:

{
        test: /react-spring/i,
        resolve: {
          fullySpecified: false,
        },
      },

Targeting react-spring in webpack configuration is enough, no need to target all .mjs files.

joshuaellis · 2023-02-24T17:40:01Z

Sure we can take a look at an experimental release for this! I'm wondering if we do something more similar to this – adobe/react-spectrum#4038 as this just fixes the issue at hand instead of tackling the root of the issue...

joepuzzo · 2023-02-24T19:14:16Z

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

joepuzzo · 2023-02-24T20:30:01Z

Update this does in fact work. Another package also happened to have a minor version release today that caused issues. Love when that happens :)

 {
        test: /react-spring/i,
        resolve: {
          fullySpecified: false,
        },
      },

joshuaellis · 2023-02-24T20:45:54Z

Update this does in fact work. Another package also happened to have a minor version release today that caused issues. Love when that happens :)
 {

        test: /react-spring/i,

        resolve: {

          fullySpecified: false,

        },

      },

You do appreciate this is due to the changes in ESM specs & webpack 4 being used? 😅

chenxsan · 2023-02-25T01:58:02Z

resolve.fullySpecified was introduced in webpack 5, so I don't think it's a webpack 4 problem.

CodyJasonBennett · 2023-02-25T16:27:46Z

This is not a bug in Webpack or similar. ESM requires usage of explicit file extensions in import specifiers (see mandatory file extensions). This can otherwise be fixed with the use of package#exports if you permit multiple entrypoints.

joshuaellis · 2023-02-25T17:32:48Z

I don't think anyone has said it was a bug with webpack @CodyJasonBennett :) I actually think from more research and discussion with a few devs on twitter a combination of exports and main/module are required to deliver the best package experience 💪🏼

chenxsan · 2023-02-26T13:04:24Z

I don't think anyone has said it was a bug with webpack @CodyJasonBennett :) I actually think from more research and discussion with a few devs on twitter a combination of exports and main/module are required to deliver the best package experience 💪🏼

I've tested it against the webpack.js.org repository, works fine with webpack 5.

bpinto · 2023-02-26T15:58:18Z

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.

joshuaellis · 2023-02-27T08:16:00Z

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 · 2023-02-27T08:22:49Z

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! 🤞🏼

evamalininaa · 2023-02-27T09:05:45Z

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

bpinto · 2023-02-27T11:26:38Z

Working for me as well 👍 Thank you! 🙇

joshuaellis · 2023-02-27T13:00:48Z

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.

evamalininaa · 2023-02-27T16:06:22Z

Hi again @joshuaellis
Can you advice why I can't install 9.7.1
Receiving error "The latest release of react-spring is "9.7.0"."

- Cleanup unused (recompose & doc-tools/components) - Move dev dependencies like gulp to devDependencies - Add UI lib dependencies (UIKit) to peerDependencies and devDependencies Note: There is an issue in the last version of react-spring: pmndrs/react-spring#2097. Restore minor ranges after fix.

zkylearner added the template: bug This issue might be a bug label Feb 24, 2023

joshuaellis added the type: needs repro Needs minimal reproduction label Feb 24, 2023

This comment was marked as off-topic.

Sign in to view

joshuaellis removed the type: needs repro Needs minimal reproduction label Feb 24, 2023

joshuaellis changed the title ~~[bug]: dependencies error~~ [bug]: ESM failed to resolve with Webpack Feb 24, 2023

joshuaellis closed this as not planned Won't fix, can't repro, duplicate, stale Feb 24, 2023

joshuaellis added status: won't fix This will not be worked on and removed template: bug This issue might be a bug labels Feb 24, 2023

joshuaellis mentioned this issue Feb 24, 2023

[bug]: React Spring not working/breaking the app after updating to verison 9.7.0 #2098

Closed

5 tasks

joshuaellis reopened this Feb 24, 2023

chenxsan mentioned this issue Feb 25, 2023

fix: specify extension for ESM export #2099

Closed

3 tasks

joshuaellis added kind: bug Something isn't working and removed status: won't fix This will not be worked on labels Feb 25, 2023

chenxsan mentioned this issue Feb 25, 2023

upgrade react-spring webpack/webpack.js.org#6659

Merged

This comment was marked as outdated.

Sign in to view

This was referenced Feb 25, 2023

fix: esm/cjs exports #2101

Merged

bug in @react-spring pmndrs/drei#1311

Closed

This comment was marked as spam.

Sign in to view

joshuaellis closed this as completed in #2101 Feb 27, 2023

evamalininaa mentioned this issue Feb 27, 2023

[bug]: 9.7.1 react-spring published ? #2105

Closed

5 tasks

DC-RomanKarpov mentioned this issue Mar 7, 2023

fix(general): better deps gravity-ui/blog-constructor#12

Merged

NullVoxPopuli added a commit to NullVoxPopuli/embroider that referenced this issue Jun 8, 2023

Comeon, webpack pmndrs/react-spring#2097 (comment)

6e703bd

NullVoxPopuli mentioned this issue Jun 8, 2023

Test if type=module is allowed for v2 addons embroider-build/embroider#1466

Closed

[bug]: ESM failed to resolve with Webpack #2097

[bug]: ESM failed to resolve with Webpack #2097

Comments

zkylearner commented Feb 24, 2023

Which react-spring target are you using?

What version of react-spring are you using?

What's Wrong?

To Reproduce

Expected Behaviour

Link to repo

joshuaellis commented Feb 24, 2023

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

joshuaellis commented Feb 24, 2023

nongtiny commented Feb 24, 2023

joshuaellis commented Feb 24, 2023

nongtiny commented Feb 24, 2023 • edited Loading

joshuaellis commented Feb 24, 2023

nongtiny commented Feb 24, 2023

joshuaellis commented Feb 24, 2023

loic-huart commented Feb 24, 2023

joshuaellis commented Feb 24, 2023

bpinto commented Feb 24, 2023 • edited Loading

joshuaellis commented Feb 24, 2023

loic-huart commented Feb 24, 2023

joshuaellis commented Feb 24, 2023

chenxsan commented Feb 24, 2023 • edited Loading

joshuaellis commented Feb 24, 2023

joepuzzo commented Feb 24, 2023

joepuzzo commented Feb 24, 2023

joshuaellis commented Feb 24, 2023

chenxsan commented Feb 25, 2023

This comment was marked as outdated.

CodyJasonBennett commented Feb 25, 2023 • edited Loading

joshuaellis commented Feb 25, 2023

This comment was marked as spam.

chenxsan commented Feb 26, 2023

bpinto commented Feb 26, 2023

This comment was marked as spam.

This comment was marked as spam.

joshuaellis commented Feb 27, 2023

joshuaellis commented Feb 27, 2023

evamalininaa commented Feb 27, 2023

bpinto commented Feb 27, 2023

joshuaellis commented Feb 27, 2023

evamalininaa commented Feb 27, 2023

nongtiny commented Feb 24, 2023 •

edited

Loading

bpinto commented Feb 24, 2023 •

edited

Loading

chenxsan commented Feb 24, 2023 •

edited

Loading

CodyJasonBennett commented Feb 25, 2023 •

edited

Loading