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",
   ...
  },

[ssmkhrj]

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

[atti187]

I guess it's just a matter of including ./src in

msw/package.json

Line 44 in ddbc5a7

"files": [

.

[kettanaito]

@atti187, absolutely. Would you like to open a pull request in the interceptors repo?

[atti187]

Sure, I'll look into it. Give me a few days to sort out a little time.

[atti187]

Meanwhile, source-map-loader can be configured to exclude @mswjs like this (keeping current excludes used in CRA5):

sourceMapLoader.exclude = /@babel(?:\/|\\{1,2})runtime|@mswjs/;

[jimwilde]

Not sure if this is related, as my problem isn't about source maps but polyfill breaking changes with webpack 5.

CRA 5
msw 0.36.8

[kettanaito]

@jimwilde, that error suggests you're trying to bundle interceptors for a non-Node.js environment (i.e. a browser). Could you double-check that you're not using setupServer in the browser in any way?

It's evident from your stack trace:

@ ./node_modules/msw/node/lib/index.js
@ ./src/mocks/handlers.ts
@ ./src/mocks/browser.ts
@ ./src/index.ts

You can see how mocks/handlers.ts lead to msw/node, which is incorrect. Do not import msw/node in your handlers.ts, so then you could use src/mocks/browser.ts for in-browser interception without issues.

I highly suggest to take a look at the directory structure in one of our examples to avoid this mistake.

[jimwilde]

@kettanaito

You were, of course, entirely correct in your diagnosis. Followed your suggested directory structure and all sorted. Thanks for the prompt response. Much appreciated!

[kettanaito]

Note to me that this will require a minor version bump, as msw hasn't yet been updated to [email protected], which introduces reworked interception logic in Node.js.

[github-actions]

🎉 This issue has been resolved in version 0.38.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀