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

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

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: https://github.com/facebook/create-react-app/pull/8227 Commit: https://github.com/facebook/create-react-app/commit/382ba21052ffd1321f3e7bb1dcb70d442106dff1#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.

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.

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/;

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

🎉 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 📦🚀

@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!

I guess it’s just a matter of including ./src in https://github.com/mswjs/msw/blob/ddbc5a7ce30eabc56390eba79e0d260f3a8f598d/package.json#L44.

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.