Wrong sources path in generated sourcemaps

[Rogdham]

Describe the bug

Since #7022, I noticed that the generated sourcemaps corresponding to some modules having wrong relative paths in the sources part of the sourcemap.

Did you try recovering your dependencies?

Yes, I also created a new CRA from scratch.

Which terms did you search for in User Guide?

sourcemap

Environment

$ npx create-react-app --info
npx : 91 installé(s) en 5.552s

Environment Info:

  System:
    OS: Linux 5.4 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 13.3.0 - /usr/bin/node
    Yarn: 1.21.0 - /usr/bin/yarn
    npm: 6.12.1 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 71.0
  npmPackages:
    react: ^16.12.0 => 16.12.0
    react-dom: ^16.12.0 => 16.12.0
    react-scripts: 3.3.0 => 3.3.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

To reproduce:

• create a new CRA
• install zxcvbn (yarn add zxcvbn)
• include some code to use the module, for example:

diff --git a/src/App.js b/src/App.js
index ce9cbd2..115ba97 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,10 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
+import zxcvbn from 'zxcvbn';
+
 function App() {
+  console.log(zxcvbn('foobar'))
   return (
     <div className="App">
       <header className="App-header">

• build (yarn build)
• look at the generated sourcemap (build/static/js/2.cd57ecb1.chunk.js.map)

As you can see, the source of the files of the zxcvbn module are not good (they do not refer node_modules)

Note that I used zxcvbn, but some other modules are impacted, for example typesafe-actions.

Expected behavior

Same as before #7022:

$ jq .sources < build/static/js/2.cd57ecb1.chunk.js.map
[
  "../node_modules/react/index.js",
  "../node_modules/zxcvbn/lib/scoring.js",
  "../node_modules/object-assign/index.js",
  "../node_modules/zxcvbn/lib/adjacency_graphs.js",
  "../node_modules/react-dom/index.js",
  "../node_modules/zxcvbn/lib/main.js",
  "../node_modules/react/cjs/react.production.min.js",
  "../node_modules/react-dom/cjs/react-dom.production.min.js",
  "../node_modules/scheduler/index.js",
  "../node_modules/scheduler/cjs/scheduler.production.min.js",
  "../node_modules/zxcvbn/lib/matching.js",
  "../node_modules/zxcvbn/lib/frequency_lists.js",
  "../node_modules/zxcvbn/lib/time_estimates.js",
  "../node_modules/zxcvbn/lib/feedback.js"
]

Actual behavior

$  jq .sources < build/static/js/2.cd57ecb1.chunk.js.map
[
  "../node_modules/react/index.js",
  "../../src/scoring.coffee",
  "../node_modules/object-assign/index.js",
  "../../src/adjacency_graphs.coffee",
  "../node_modules/react-dom/index.js",
  "../../src/main.coffee",
  "../node_modules/react/cjs/react.production.min.js",
  "../node_modules/react-dom/cjs/react-dom.production.min.js",
  "../node_modules/scheduler/index.js",
  "../node_modules/scheduler/cjs/scheduler.production.min.js",
  "../../src/matching.coffee",
  "../../src/frequency_lists.coffee",
  "../../src/time_estimates.coffee",
  "../../src/feedback.coffee"
]

Possible fix / thoughts

It seems that the paths used are the ones from the sourcemap of the module.

A potential fix would be in packages/react-scripts/config/webpack.config.js, with the following patch:

--- webpack.config.js
+++ webpack.config.js_potential-fix
@@ -484,7 +484,7 @@
                 // Babel sourcemaps are needed for debugging into node_modules
                 // code.  Without the options below, debuggers like VSCode
                 // show incorrect code and set breakpoints on the wrong lines.
-                sourceMaps: shouldUseSourceMap,
+                sourceMaps: false,
                 inputSourceMap: shouldUseSourceMap,
               },
             },

@justingrant : I feel like you are the right person to comment on this issue since you authored #7022 🙏

[justingrant]

Hi @Rogdham - Take a look at #8071. I suspect yours is a duplicate of that issue.

This comment outlines what's remaining to solve before a fix can get into CRA. The next comment in that issue describes a workaround.

[Rogdham]

Thank you for your reply @justingrant, really appreciated! 👍

I tried the workaround and it seems to be working fine as far as I'm concerned: 🎉

$ jq .sources < build/static/js/2.cd57ecb1.chunk.js.map
[
  "../node_modules/react/index.js",
  "../node_modules/zxcvbn/src/scoring.coffee",
  "../node_modules/object-assign/index.js",
  "../node_modules/zxcvbn/src/adjacency_graphs.coffee",
  "../node_modules/react-dom/index.js",
  "../node_modules/zxcvbn/src/main.coffee",
  "../node_modules/react/cjs/react.production.min.js",
  "../node_modules/react-dom/cjs/react-dom.production.min.js",
  "../node_modules/scheduler/index.js",
  "../node_modules/scheduler/cjs/scheduler.production.min.js",
  "../node_modules/zxcvbn/src/matching.coffee",
  "../node_modules/zxcvbn/src/frequency_lists.coffee",
  "../node_modules/zxcvbn/src/time_estimates.coffee",
  "../node_modules/zxcvbn/src/feedback.coffee"
]

The sourcemap points to the original source of the external library (zxcvbn), which are included in the NPM package, so we have them. I don't know if they are always included though… but that would probably be an other issue (potentially an issue to report to the external library itself).

So I'm closing this issue: I'm not really sure that #8071 is a duplicate, but the workaround offered there does fix my issue. I guess that the real fix would solve the issue as well. If anyone disagrees, I can always reopen the issue.