Repository: webpack/webpack (js)

Issue:
type="module" on script tag results in "Cannot read property 'webpackHotUpdate' of undefined" when hot reloading is enabled.
**Do you want to request a *feature* or report a *bug*?**
Bug

**What is the current behavior?**
The compiled bundle fails to execute with the error `Uncaught TypeError: Cannot read property 'webpackHotUpdate' of undefined` when using [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) on script tags.

**If the current behavior is a bug, please provide the steps to reproduce.**
https://github.com/RDGthree/webpackHotUpdate-bug-example

Clone this repo, `npm install`, and `npm run start`. Open index.html in a browser and check the console. I used `webpack-dev-server`, but the issue relates to Webpack's core.

I'm pretty sure the issue relates to [`this` no longer referring to `window`](http://exploringjs.com/es6/ch_modules.html#sec_modules-vs-scripts) with `type="module"`.

**What is the 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.

**Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.**
* 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

Pull request:
[fix] error on HMR with es6 bundles
<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. -->

**What kind of change does this PR introduce?**

It's a bug fix.

<!-- E.g. a bugfix, feature, refactoring, build related change, etc… -->

**Did you add tests for your changes?**

Update test.

<!-- Note that we won't merge your changes if you don't add tests -->

**If relevant, link to documentation update:**

<!-- Link PR from webpack/webpack.js.org here, or N/A -->
N/A

**Summary**

We notice a bug in webpack HMR during our spike on creating es6 bundles.

Bug:
- `bootstrap` dev bundle containes a `this` no longer bound to `window`, so it was undefined.

Fix:
- Use `window` instead of `this` in both scripts templates.

This bug was identifed in #5776

<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
<!-- Try to link to an open issue for more information. -->

**Does this PR introduce a breaking change?**

No.
<!-- If this PR introduces a breaking change, please describe the impact and a migration path for existing applications. -->

**Other information**
Fix #5776
Made with @osirisxxl

Patch:
diff --git a/lib/JsonpMainTemplatePlugin.js b/lib/JsonpMainTemplatePlugin.js
index e6f55625e..209afd1f3 100644
--- a/lib/JsonpMainTemplatePlugin.js
+++ b/lib/JsonpMainTemplatePlugin.js
@@ -195,8 +195,8 @@ class JsonpMainTemplatePlugin {
 function hotDisposeChunk(chunkId) {
 	delete installedChunks[chunkId];
 }
-var parentHotUpdateCallback = this[${JSON.stringify(hotUpdateFunction)}];
-this[${JSON.stringify(hotUpdateFunction)}] = ${runtimeSource}`;
+var parentHotUpdateCallback = window[${JSON.stringify(hotUpdateFunction)}];
+window[${JSON.stringify(hotUpdateFunction)}] = ${runtimeSource}`;
 		});
 		mainTemplate.plugin("hash", function(hash) {
 			hash.update("jsonp");
diff --git a/lib/webworker/WebWorkerMainTemplatePlugin.js b/lib/webworker/WebWorkerMainTemplatePlugin.js
index ce9615569..b717ce90b 100644
--- a/lib/webworker/WebWorkerMainTemplatePlugin.js
+++ b/lib/webworker/WebWorkerMainTemplatePlugin.js
@@ -82,8 +82,8 @@ class WebWorkerMainTemplatePlugin {
 			});
 
 			return source + "\n" +
-				`var parentHotUpdateCallback = this[${JSON.stringify(hotUpdateFunction)}];\n` +
-				`this[${JSON.stringify(hotUpdateFunction)}] = ` +
+				`var parentHotUpdateCallback = self[${JSON.stringify(hotUpdateFunction)}];\n` +
+				`self[${JSON.stringify(hotUpdateFunction)}] = ` +
 				Template.getFunctionContent(require("./WebWorkerMainTemplate.runtime.js"))
 				.replace(/\/\/\$semicolon/g, ";")
 				.replace(/\$require\$/g, this.requireFn)


Test patch:
diff --git a/test/WebWorkerMainTemplatePlugin.unittest.js b/test/WebWorkerMainTemplatePlugin.unittest.js
index c7a1fb38a..8325257ac 100644
--- a/test/WebWorkerMainTemplatePlugin.unittest.js
+++ b/test/WebWorkerMainTemplatePlugin.unittest.js
@@ -188,8 +188,8 @@ installedChunks[chunkIds.pop()] = 1;
 				it("returns the original source with hot update callback", () => {
 					env.source.should.be.exactly(`
 moduleSource()
-var parentHotUpdateCallback = this["webpackHotUpdate"];
-this["webpackHotUpdate"] = function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars
+var parentHotUpdateCallback = self["webpackHotUpdate"];
+self["webpackHotUpdate"] = function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars
 	hotAddUpdateChunk(chunkId, moreModules);
 	if(parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
 } ;