webpack: Webpack sourcemaps do not work well with ES6 imports (repost)

Bug report

What is the current behavior?

This is a repost of #4560, which was closed due to inactivity.

Current behavior is that sourcemaps do not work well with ES6 imports.

Example: import { printToConsole } from './util'; becomes _util__WEBPACK_IMPORTED_MODULE_0__.printToConsole.

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

Clone minimal project: https://github.com/abirmingham/webpack-sourcemap-repro
Open <repository>/index.html with Chrome. I used Chrome 74.0.3729.169 (Official Build) (64-bit) but the issue has been present in all builds for awhile. Also tested Firefox 68.0 (64-Bit).
Open developer tools
Set a breakpoint on line 3 of index.js

What is the expected behavior?

In scope pane, printToConsole should be shown. Instead, _util__WEBPACK_IMPORTED_MODULE_0__.printToConsole is shown. There are likely other areas where it should show up mapped as well.
User should be able to input printToConsole('foo') and see the printToConsole function successfully execute. Instead, Uncaught ReferenceError: printToConsole is not defined is shown. (I’m curious as to whether this part is even solvable by webpack or if I am making a browser feature request here).

Other relevant information: webpack version: 4.37.0 Node.js version: 8.10.0 Operating System: Ubuntu Additional tools: Chrome 74.0.3729.169 (Official Build) (64-bit)

Chrome Firefox

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 13
Comments: 15 (9 by maintainers)

Commits related to this issue

Initial commit - repro webpack/webpack#9461 on latest versions — committed to abirmingham/repro-webpack-9461 by abirmingham 4 years ago

Most upvoted comments

Can you clarify? Do you want to have windows.logToConsole?

I assume you mean window.logToConsole? No, I don’t. Sorry if I’m not being clear, let me try and explain using es6 modules directly in the browser, without webpack.

I’ve added a new commit to the repro. Please access working-es6-modules-example/index.html in a browser and set a breakpoint in app.js, you will see the behavior that I’m looking for:

Note that you must serve the files through a webserver, e.g. python3.6 -m http.server 8000 because CORS applies to es6 modules.

abirmingham on Jan 21, 2020

@evilebottnawi yes. I’ve reproduced the issue using a create-react-app template and webpack-dev-server using the newest versions of webpack/terser-webpack-plugin and chrome browser at https://github.com/abirmingham/repro-webpack-9461/commit/c05be9ca8ba07da4109a62ec221a08f829bcc8ae

To reproduce:

Checkout the repository
Run npm run start
Add a breakpoint to App.js
Note that logToConsole is not defined
Note that _SomeDep__WEBPACK_IMPORTED_MODULE_3__.logToConsole is defined

Chrome version Version 79.0.3945.117 (Official Build) (64-bit)

abirmingham on Jan 15, 2020

I think it can be implement in webpack@5, we can’t save module scope due some internal reasons in webpack@4, but it is possible for webpack@5

alexander-akait on Jan 22, 2020

@evilebottnawi -

In the code, logToConsole is in scope in App.js. It would be useful if logToConsole was in scope in the browser as well. I agree that logToConsole should not be in global scope, just in scope in App.js because it is imported in App.js. I understand that this is complex, and may require additional browser support, because of certain requirements in the ES module spec. Nonetheless it would be quite useful, and I think that the current behavior is likely unexpected to most users.

abirmingham on Jan 20, 2020

For webpack 4, use this plugin. This will simplify names if you’re using eval and allow straight import vars to be used with source maps when debugging (if they’re not reassigned, which probably counts for 99.9% of the cases).

So this code:

import a, {b, c as d} from 'foo'
a()

becomes

var __foo = webpack_require('...'); let {default: a, b, c: d} = __foo; if (typeof d === "undefined") d = _foo
_foo.a()

https://gist.github.com/staeke/f197ff144e379aa884f91b95003f4ee1

staeke on Jun 19, 2020

@abirmingham somebody should send a fix, a lot of work with other problem

alexander-akait on Jan 31, 2021