Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

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

Expected behavior

should not have these warning errors.

Screenshots

Issue Analytics

State:
Created 2 years ago
Reactions:23
Comments:17 (6 by maintainers)

Top GitHub Comments

37reactions

ssmkhrjcommented, Jan 10, 2022

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.

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

14reactions

JonRooseveltcommented, Jan 3, 2022

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

Top Results From Across the Web

Webpack Module Warning: Failed to parse source map from ...

As a sort of fix I removed the source-map-parser and the warning disappeared. Is it possible this issue happened because a webpack watch...

Fixing sourcemap errors in Webpack 5 - Ionic React

[react-scripts] Failed to parse source map from '/home/anon/d/ionic/node_modules/@capacitor/app/src/definitions.ts' file: Error: ENOENT: no ...

source-map-loader - webpack

The source-map-loader extracts existing source maps from all JavaScript entries. This includes both inline source maps as well as those linked via URL....

upgrading to webpack 5 causes sourcemap issues : r/typescript

Hi all, I am not sure if this is a webpack or typescript issue so if I am ... node_modules/source-map-loader/dist/cjs.js): Failed to parse...

Failed to parse source map warnings - Dynamic Docs

node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'node_modules/json-rpc-engine/src/mergeMiddleware.ts' file: Error: ENOENT: no ...