-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
sourcemaps and runtime variables misaligned, yielding difficult debugging #1557
Comments
Yes, unfortunately it's a known issue with sourcemaps in Babel (and everywhere, really), and one of the reasons I argued against including sourcemaps. However, a lot of people find them very valuable so we opted to include them despite the drawbacks. I think there was some sort of change to sourcemap spec to retain variable mapping information. But I don't know if either Babel, Webpack, or Chrome are taking advantage of it. Probably relevant issues:
|
As for your particular case I'm not even sure if support for mangled mapping will help.
It is necessary because of ES6 spec. In ES6, imports are “live” so the only way to implement it in ES5 is to have a variable indirection for the import itself. It’s the same reason you see See also http://www.2ality.com/2015/07/es6-module-exports.html (search for “live” on the page). |
I only remember babel/babel#3658 which broke webpack and also referenced before in #1188 |
As I recall, the patch to webpack ( |
It would be nice to verify that without Webpack in the middle, sourcemaps produced by Babel give meaningful results in Chrome. Just so we have a confirmation it's worth doing the work on Webpack side. |
I think we just need to test with full-blown sourcemaps enabled (during development, I may be wrong tho), because |
i made an example here, only to realize that of course pure babel is ok--its babel-loader w/ uglify that warrant these difficult source maps. i also did an example with babili. all is green 🍏, but it's a biased test because babel & babili are maintaining my symbol names. |
For now I don't think we care about what happens with Babili as we don't ship with it. |
then the first example should suffice :). however, theres no bundler or uglification/mangling w/ pure babel, so no reason for the failure mode described above to affect it. |
What is the next actionable step here? Do we need to file an issue with one of the projects? Which one? |
sorry, my remarks didn't add clarity. lets fix that! your original thoughts were ~~accurate.
therefore there should be a followup in babel-land on this. this can be easily demonstrated by cloning & running this tiny example. because we wanted a webpack-free example, i stub in a |
I'm able to get the variable bindings aligned by using the following .babelrc file.
|
@wasifhyder, nice! i haven't tested it, but if you're confident, you should drop a PR down on |
I don’t think we’ll be adding CommonJS-based plugins as we’re trying to migrate to Webpack 2 and specifically its ES modules implementation. |
@cdaringe - Thanks :) I just added in this comment for future reference in case anyone looks it up. There's not much information on the web here, and this could count as a potential custom fix for anyone who's willing to accept the tradeoff. As for PR, @gaearon is right. I think it slows the build slightly as well. |
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. |
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 whyurl
was mangled to_url
or why a new varparseUrl
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:
npm ls react-scripts
(if you haven’t ejected): 0.9.xnode -v
: 7.4.1npm -v
: 4.12.1, yarn 0.19.1Then, specify:
Reproducible Demo
The text was updated successfully, but these errors were encountered: