sourcemaps and runtime variables misaligned, yielding difficult debugging

Can you reproduce the problem with latest npm?

yes

Can you still reproduce it?

yes

Description

The sourcemaps appear to work, however, the browser runtime (chrome, in my case) does not honor variable names.

^ Notice how parseUrl is defined and valid, yet I cannot access it in the render scope.

^ in fact, _url.parse is a thing. i don’t understand why url was mangled to _url or why a new var parseUrl was not put into scope.

I realize that this might be a browser issue, vs a create-react-app issue, but can’t say for certain because it may related to CRA’s source-map generation.

Expected behavior

Have vars accessible in scope as written in source

Actual behavior

vars are mangled and hidden from the user.

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected): 0.9.x
2. node -v: 7.4.1
3. npm -v: 4.12.1, yarn 0.19.1

Then, specify:

1. Operating system: el cap
2. Browser and version: chrome 56.0.2

Reproducible Demo

• clone https://github.com/cdaringe/react-scripts-source-map-wonky-isms
• cd <project>
• yarn
• yarn start
• open dev tools. it should already break at the correct location to see the failure mode

[wasifhyder]

I’m able to get the variable bindings aligned by using the following .babelrc file.

// .babelrc
{
  "presets": [
    "react",
    ["es2015", {"modules": false}]
  ],
  "plugins": [
    ["transform-es2015-modules-commonjs-simple", {
      "noMangle": true
    }]
  ],
  "sourceMaps": true
}

[gaearon]

Closing this as stale. If this is still a problem I encourage you to figure out which project is responsible for this issue (either Babel or Webpack) and follow up with them.