type="module" on script tag results in "Cannot read property 'webpackHotUpdate' of undefined" when hot reloading is enabled.

[RDGthree]

• Operating System: MacOS 10.12
• Node Version: 8.4.0
• NPM Version: 5.3.0
• webpack Version: 3.6.0
• webpack-dev-server Version: 2.9.1

• This is a bug
• This is a feature request
• This is a modification request

Code

Quick example: https://github.com/RDGthree/webpackHotUpdate-bug-example

Expected Behavior

When using type="module" on script tags, Hot Module Reloading works the same as with type="text/javascript", or has a helpful error.

Actual Behavior

The compiled bundle fails to execute with the error Uncaught TypeError: Cannot read property 'webpackHotUpdate' of undefined.

For Bugs; How can we reproduce the behavior?

Clone the example repo, npm install, and npm run start. Open index.html in a browser and check the console.

[shellscape]

@RDGthree thanks for stopping in. FYI I removed the bug label for this issue because I'm not convinced that this is in fact a bug. I can't dig up anything on webpack using script tags with the module type, other than this article which mentions it in passing. webpack-dev-middleware isn't setup to watch scripts loaded outside of the bundle that webpack builds. So from there we'd like you answer a few questions:

1. does webpack yet support importing scripts as part of the build? if no, then please close the issue and open a new one at webpack/webpack
2. if webpack does support this, does the hot module reloading portion of webpack support script modules? if no, then please close this issue and create a new one at the same repo
3. if Firefox: The character encoding of the HTML document was not declared #1 and Error: Module "jquery" not found in context "." #2 are both yes, then have you confirmed this is a bug in webpack-dev-server and not webpack-dev-middleware?

If you made it to question #3, my bet is that it's a shortcoming in webpack-dev-middleware, and that really needs to be verified. Because this capability isn't mentioned in the docs for either webpack-dev-server or webpack itself (and please do correct me if I'm wrong here, it's totally possible I missed it) this is probably more along the lines of a new feature, and even then I'm not sure where it should go.

[RDGthree]

I'm not sure I follow what you're asking. Modules are core to Webpack.

webpack 1 requires a specific loader to convert ES2015 import, however this is possible out of the box via webpack 2

The type="module" script tag just allows you to use that actual ES6 code in newer browsers instead of compiling down to ES5 polyfills. This bug looks like it's just related to the fact that when using type="module", this no longer refers to window.

In any case, in explaining the issue here I dug into the source code a bit and it looks like this is a core Webpack issue. I'll put the issue there.