webpack 5: Failed to parse source map from "@mswjs/interceptors"

[JoeyAtSS]

Describe the bug

New webpack 5.0 throwing compilation error regarding source map not found

there are multiple of these, but for the sake of simplicity, i just pasted one of it.

Environment

• msw: 0.36.3
• nodejs: 14.18.2
• npm: 8.3.0

Please also provide your browser version. N/A, this is compilation warning error

To Reproduce

Steps to reproduce the behavior:

1. Create new react app using CRA5.0
2. install latest msw.
3. Npm start, the warnings are being thrown in the terminal

Expected behavior

should not have these warning errors.

Screenshots

[mauroaccornero]

I've the same warning after updating create react app. I see the warnings after npm start. All the warning are about @mswjs/interceptors at least for me. I tried to rebuild the module but didn't help.

[kettanaito]

Hey, @JoeyAtSS. Thanks for reporting this.

It looks like the issue is coming from the sourcemaps for the @mswjs/interceptors package:

// node_modules/@mswjs/interceptors/lib/interceptors/fetch/index.js.map
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/interceptors/fetch/index.ts"],

Note how it references the fetch/index.ts file.

I don't think this is an issue with the library itself, as we haven't changed our bundling process in a while. It may be an indirect issue of webpack5 behaving differently, to which we have to find a proper way to adjust.

One thing I'm not certain about is why webpack attempts to require modules from the sourcemaps. To my best knowledge, sourcemaps link the compiled and source code to ease your debugging whenever the former has any issues. I wouldn't expect the source module references to be imported.

[kettanaito]

I have a suspicion that CRA5 should configure webpack to ignore source maps from node_modules. I'd like to know how it used to behave previously.

[slowselfip]

Hello,

The source map files links to the src/ - folder that is not distributed.

// node_modules/@mswjs/interceptors/lib/interceptors/utils/uuid.js.map
{"version":3,"file":"uuid.js","sourceRoot":"","sources":["../../-->src<--/utils/uuid.ts"] ...}

In the source-map-loader README it says: "The source-map-loader will extract from any JavaScript file, including those in the node_modules directory.".

As for CRA 5:
I think a change was added in this PR: facebook/create-react-app#8227
Commit: facebook/create-react-app@382ba21#diff-8e25c4f6f592c1fcfc38f0d43d62cbd68399f44f494c1b60f0cf9ccd7344d697
Current source: https://github.com/facebook/create-react-app/blob/9673858a3715287c40aef9e800c431c7d45c05a2/packages/react-scripts/config/webpack.config.js#L350

I'm seeing these warnings when starting the dev server using react-scripts start, If i exclude the above config by setting GENERATE_SOURCEMAP=false when starting the dev server the warnings disappear.

[JonRoosevelt]

Hello,

The source map files links to the src/ - folder that is not distributed.

// node_modules/@mswjs/interceptors/lib/interceptors/utils/uuid.js.map
{"version":3,"file":"uuid.js","sourceRoot":"","sources":["../../-->src<--/utils/uuid.ts"] ...}

In the source-map-loader README it says: "The source-map-loader will extract from any JavaScript file, including those in the node_modules directory.".

As for CRA 5: I think a change was added in this PR: facebook/create-react-app#8227 Commit: facebook/create-react-app@382ba21#diff-8e25c4f6f592c1fcfc38f0d43d62cbd68399f44f494c1b60f0cf9ccd7344d697 Current source: https://github.com/facebook/create-react-app/blob/9673858a3715287c40aef9e800c431c7d45c05a2/packages/react-scripts/config/webpack.config.js#L350

I'm seeing these warnings when starting the dev server using react-scripts start, If i exclude the above config by setting GENERATE_SOURCEMAP=false when starting the dev server the warnings disappear.

In case someone is lost on how to do it, just add the GENERATE_SOURCEMAP=false before the start script.
In my case:

...
"scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
   ...
  },

[som-sm]

Hello,
The source map files links to the src/ - folder that is not distributed.

// node_modules/@mswjs/interceptors/lib/interceptors/utils/uuid.js.map
{"version":3,"file":"uuid.js","sourceRoot":"","sources":["../../-->src<--/utils/uuid.ts"] ...}

In the source-map-loader README it says: "The source-map-loader will extract from any JavaScript file, including those in the node_modules directory.".
As for CRA 5: I think a change was added in this PR: facebook/create-react-app#8227 Commit: facebook/create-react-app@382ba21#diff-8e25c4f6f592c1fcfc38f0d43d62cbd68399f44f494c1b60f0cf9ccd7344d697 Current source: https://github.com/facebook/create-react-app/blob/9673858a3715287c40aef9e800c431c7d45c05a2/packages/react-scripts/config/webpack.config.js#L350
I'm seeing these warnings when starting the dev server using react-scripts start, If i exclude the above config by setting GENERATE_SOURCEMAP=false when starting the dev server the warnings disappear.

In case someone is lost on how to do it, just add the GENERATE_SOURCEMAP=false before the start script. In my case:

...
"scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
   ...
  },

For Windows Users 🚀🤘

Create an environment variables file named .env in the project root and add GENERATE_SOURCEMAP=false to it.

OR

Run npm i -D cross-env and then in the package.json file update the start script to the following:

"scripts": {
    "start": "cross-env GENERATE_SOURCEMAP=false react-scripts start"
}

[kettanaito]

What I'd like to understand better is whether this sourcemap behavior is specific to CRA or happens on clean webpack apps?

If it's specific to CRA then it needs to be addressed when using CRA (i.e using the GENERATE_SOURCEMAP env variable). If this happens generally with any webpack app, then we need to publish the source code to NPM (mswjs/interceptors#196) to prevent this from happening.

Please, would somebody have time to spin up a clean webpack app to check this?

[usmaanalii]

What I'd like to understand better is whether this sourcemap behavior is specific to CRA or happens on clean webpack apps?

If it's specific to CRA then it needs to be addressed when using CRA (i.e using the GENERATE_SOURCEMAP env variable). If this happens generally with any webpack app, then we need to publish the source code to NPM (mswjs/interceptors#196) to prevent this from happening.

Please, would somebody have time to spin up a clean webpack app to check this?

I can confirm this occurs with a clean webpack setup