webpack: create-react-app: source generated by webpack source and chrome source doesn't mactch up

Bug report

What is the current behavior?

Background: create-react-app was using cheap-module-source-map and it didn’t work well with browser breakpoints: https://github.com/facebook/create-react-app/issues/6074

it switched from cheap-module-source-map to eval-source-map for 2.1.4 release: https://github.com/facebook/create-react-app/pull/5060

This broke the error overlay line number because the source code generated from webpack doesn’t match that of Chrome’s: https://github.com/facebook/create-react-app/issues/6433

What is the expected behavior? Ideally eval-source-map should be used in create-react-app but this is a blocking issue.
We should be able to matching source code in both chrome and webpack source. Currently webpack source code is generated using this middleware for webpack-dev-server: https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/evalSourceMapMiddleware.js

If the current behavior is a bug, please provide the steps to reproduce.

Repo of mismatched source code: create-react-app --scripts-version 2.1.4 myapp

The only change I made:

$ git diff
diff --git a/src/App.js b/src/App.js
index 7e261ca..e2cb9ac 100755
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import './App.css';
 
 class App extends Component {
   render() {
+    console.log(null.length);
     return (
       <div className="App">
         <header className="App-header">

Run yarn start or npm start to start the app.

React-error-overlay:

TypeError: Cannot read property 'length' of null
App.render
src/App.js:10:8
   7 | console.log(null.length);
   8 | return (
   9 |   <div className="App">
> 10 |     <header className="App-header">
     |    ^  11 |       <img src={logo} className="App-logo" alt="logo" />
  12 |       <p>
  13 |         Edit <code>src/App.js</code> and save to reload.

Clicking on view compiled in the UI (from react-error-overlay):

TypeError: Cannot read property 'length' of null
App.render
webpack-internal:///./src/App.js:37:24
  34 |   className: "App-header",
  35 |   __source: {
  36 |     fileName: _jsxFileName,
> 37 |     lineNumber: 10
     |                  ^  38 |   },
  39 |   __self: this
  40 | }, React.createElement("img", {

Actual source code from chrome, notice that line 37 is the correct line, where as react-error-overlay shows a different source. screen shot 2019-02-16 at 1 25 37 am

If you visit http://localhost:3000/__get-internal-source?fileName=webpack-internal%3A%2F%2F%2F.%2Fsrc%2FApp.js you’ll see this is the source code generated from webpack, which is different from the source code in chrome.

This gist contains the difference in source code between that of react-error-overlay and webpack: https://gist.github.com/bugzpodder/20e8bc711450d6c0b516785fecab876f

Other relevant information: webpack version: 4.28.3 Node.js version: 10.15 Operating System: MacOSX Additional tools: create-react-app 2.1.4

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 16 (7 by maintainers)

Most upvoted comments

@montogeek I believe this is still an issue. This is causing breakpoints to not work in any user using CRA, which is a pretty big blocker.

dannycochran on Apr 9, 2019

Repo: https://github.com/bugzpodder/webpack-dev-server/tree/master/examples/api/middleware

run yarn to install a few packages
start the demo node server.js
navigate to localhost:8080
compare source from console (step 2) and in chrome source.

Note that if you switch webpack to use cheap-module-source-map by adding: devtool: ‘cheap-module-source-map’ to webpack configs, the extra lines below disappear.

Chrome source of index.js

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../node_modules/react/index.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "../../../node_modules/react-dom/index.js");
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);




var target = document.querySelector('#target');
react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, "Test"), target);
console.log(null.x);

Source from webpack middleware:

'use strict';

import React from "react";
import ReactDOM from "react-dom";
var target = document.querySelector('#target');
ReactDOM.render(React.createElement("div", null, "Test"), target);
console.log(null.x);

bugzpodder on Mar 14, 2019

@justingrant your fix seem to be dealing with sourcemaps for files in node_modules, this is for the app’s sourcemaps. In any cases, I’ve already put your PR in 3.1 milestone for review.

bugzpodder on Jul 3, 2019

Can you try using latest CRA? they reverted changes to source maps.

montogeek on Mar 20, 2019