Create-react-app: Debugging in Chrome and FireFox not evaluating "let" and "const" vars

[TheTFo]

Is this a bug report?

Yes, though not entirely sure it's CRA related, may be babel or webpack.

Can you also reproduce the problem with npm 4.x?

I don't think it's relevant, but will try if requested.

Which terms did you search for in User Guide?

DevTools, Chrome, ES6, Source Maps, lots of other googling beyond

Environment

1. node -v: 8.7.0
2. npm -v: 5.4.2
3. yarn --version (if you use Yarn):
4. npm ls react-scripts (if you haven’t ejected): 1.0.14

Then, specify:

1. Operating system: Windows 10
2. Browser and version (if relevant): Chrome Chrome 62.0.3202.94, FireFox 57.0.1

Steps to Reproduce

As far as I can tell, it's a simple as:

1. Write a module that uses ES6 const and let keys words inside a switch statement. For me, it's in a redux reducer
2. npm run start
3. Debug the module, see something similar to below:

Expected Behavior

Variables to evaluate properly

Actual Behavior

state is defined, newState should be defined, but is not. I'm wondering if this is because I use similar naming in each switch case block.

I've also removed all Flow typing from the file, same result. I've also tried several devtool options for Webpack with no changes.

Reproducible Demo

https://github.com/facebookincubator/create-react-app/issues/3597#issuecomment-356338424

[d07RiV]

I have this happen all the time, I think it has to do with webpack sourcemaps but I'm not sure. I'm getting garbage output such as this showing props instead. Adding a console.log statement produces the correct output, but hovering over variables or printing them in debug console does not.

[TheTFo]

I tried with various devtool settings, and nothing seemed to fix it. Also noticed in FireFox.

[gaearon]

This will need some investigation. I don't know if there's a way to fix it with Babel/Webpack but it's worth looking into. Unfortunately I won't have time to do it myself.

cc @samccone @paulirish Can somebody on your side help us figure out why this broke? I think it used to work although I might be wrong.

@TheTFo @d07RiV Please prepare a reproducing example, it’s very hard to help you if you didn’t create one. This issue could’ve progressed if you spent a few minutes sharing it.

[TheTFo]

Sorry, Dan. I got caught up with the holidays, and this fell off.

I can't share my code, but I'll try to put together a reproduction tomorrow.

On Mon, Jan 8, 2018, 7:08 PM Dan Abramov [e-mail] wrote:

This will need some investigation. I don't know if there's a way to fix it
with Babel/Webpack but it's worth looking into. Unfortunately I won't have
time to do it myself.

cc @samccone https://github.com/samccone @paulirish
https://github.com/paulirish Can somebody on your side help us figure
out why this broke? I think it used to work although I might be wrong.

@TheTFo https://github.com/thetfo @d07RiV https://github.com/d07riv
Please prepare a reproducing example, it’s very hard to help you if you
didn’t create one. This issue could’ve progressed if you spent a few
minutes sharing it.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/facebookincubator/create-react-app/issues/3597#issuecomment-356137229,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAgWoF9n4zE7tmfjZKGX7Vci0QzHNOK9ks5tIq4AgaJpZM4RBfiE
.

[gaearon]

Thank you so much, this is appreciated!

[TheTFo]

https://github.com/TheTFo/es6-debug-issue

Clone master,
npm install
npm run start

Place a breakpoint on src/App.js, line 17. Inspect myObject on line 16, and it is undefined.

[gaearon]

Awesome, thanks! This is very helpful.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 7 days if no further activity occurs.