Posted in Uncategorized

Chrome 40 doesn’t recognized source map urls produced with #eval

   February 23, 2021  3 Comments on Chrome 40 doesn’t recognized source map urls produced with #eval

Hi there!

Using Webpack 1.5.3 and Chrome 40 (not Chrome 39, it works properly), open a page with a javascript error and click on one of the links in the backtrace for that error. (In a file from the Webpack bundle, of course).

If your experience is like mine, a new blank tab will pop up with the URL that devtools should be using to navigate to the source inside of bundle.js.

when the devtool string in the webpack config is set to ‘#inline-source-map’ Chrome understands the link just fine, but there have been reports of reduced accuracy in line numbers with that method, and also the filename in the backtrace is always ‘bundle.js’. ‘#eval’ seems to be more accurate, and it shows original filenames in the backtrace, but clicking on that backtrace link breaks in Chrome 40.

I’m opening up this issue here not because this is necessarily a webpack issue, but because I thought it’d be a good place to get ideas about what could be going wrong.

Any ideas? 🙂

Author: Fantashit

3 thoughts on “Chrome 40 doesn’t recognized source map urls produced with #eval”

  1. Same on Chrome 41. Link like webpack:///./folder/file.js?:166:31 opens a new tab.

    UPD: solved by enabling “Enable JavaScript source maps” in devtools settings. The effect of this settings wasn’t immediate, so you may need to reload the browser.

  2. @chemoish Same.

    I think it’s because eval-source-map generates filenames with a “query string” at the end (like someFile.js?65d2), but source-map generates normal filenames (someFile.js).

    So if you put a breakpoint in someFile.js then Chrome does not activate it when using eval-source-map (I assume because Chrome must see someFile.js and someFile.js?65d2 as different files).

    Edit: I see now that Chrome actually has an index of the sources with the query strings under the webpack:// umbrella (drill down to the webpack:// -> . directory in the Sources panel). Breakpoints set here will actually trigger correctly!

    (I haven’t tried mapping these files to my workspace, however, so that may still not work, but is less of a concern)

    Edit 2: Actually, when an unexpected error throws while using eval-source-map and the dev server, I don’t get a stack trace in Chrome. Just a hyperlink to a location in source that looks like (bundle):125, which goes nowhere when I click on it..

    @sokra Is this expected or is there something I’m missing?

  3. I also see this issue in Firefox and Chrome when the last line of my file contains a comment.

    exports.Something = Something; //This comment breaks source maps

Comments are closed.