webpackHotUpdate currentUpdate is undefined

[freshhan163]

Bug report

What is the current behavior?

when modify app.vue, then refresh page, there will be an error:

app.js:939 Uncaught TypeError: Cannot set properties of undefined (setting './node_modules/babel-loader/lib/index.js??clonedRuleSet-1.use!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=template&id=7ba5bd90')
    at self.webpackHotUpdatepc_live_next

after check, it is currentUpdate is undefined:

/******/           self["webpackHotUpdatepc_live_next"] = (chunkId, moreModules, runtime) => {
/******/ 			for(var moduleId in moreModules) {
/******/ 				if(__webpack_require__.o(moreModules, moduleId)) {
/******/ 					currentUpdate[moduleId] = moreModules[moduleId];
/******/ 					if(currentUpdatedModulesList) currentUpdatedModulesList.push(moduleId);
/******/ 				}
/******/ 			}
/******/ 			if(runtime) currentUpdateRuntime.push(runtime);
/******/ 			if(waitingUpdateResolves[chunkId]) {
/******/ 				waitingUpdateResolves[chunkId]();
/******/ 				waitingUpdateResolves[chunkId] = undefined;
/******/ 			}
/******/ 		};

And to compare with webpack4, it is

/******/ 	function hotAddUpdateChunk(chunkId, moreModules) {
/******/ 		if (!hotAvailableFilesMap[chunkId] || !hotRequestedFilesMap[chunkId])
/******/ 			return;
/******/ 		hotRequestedFilesMap[chunkId] = false;
/******/ 		for (var moduleId in moreModules) {
/******/ 			if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/ 				hotUpdate[moduleId] = moreModules[moduleId];
/******/ 			}
/******/ 		}
/******/ 		if (--hotWaitingFiles === 0 && hotChunksLoading === 0) {
/******/ 			hotUpdateDownloaded();
/******/ 		}
/******/ 	}

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

What is the expected behavior?
I would expect that when currentUpdate is undfined, return.

Other relevant information:
webpack version: 5.64.3
Node.js version: v12.19.0
Operating System: OS
Additional tools: vue3.0

[alexander-akait]

Please create reproducible test repo

[alexander-akait]

Based on the problem, bug in vue-loader... Do you use official docs to setup it?

[freshhan163]

you can see webpack config in repo: https://github.com/freshhan163/test-vue3-ssr

I think it is not vue-loader problem.

can you reproduce my problem?

The Problem is in HotModuleReplacementPlugin, It seems like didn't consider SSR condition. After I modify App.vue, then refresh page, this errror will appear.

[alexander-akait]

Sorry, I don't see any problems with HotModuleReplacementPlugin, vue-loader adds additional logic for SSR and looks it is broken

[freshhan163]

@vankop Is there a solution for this problem?

[utkanpar]

@freshhan163 I had a similar issue with #14873 (comment) but with a different error. The issue in my scenario was XXX.hot-update.js was by mistake loaded into the client side as a standalone script. The hot-update.js script is not supposed to be loaded on the client side. More info here: #11670 (comment)

[lihancong]

try to remove the globalObject: 'this' setting from output

[pisetski]

Hey @lihancong, your solution works for me. Thanks!

[utkanpar]

Hello @alexander-akait @lihancong , we are seeing similar error in our react project as well after I modify my code in .tsx file and after HMR reloads the page.

We are not using globalObject: 'this' setting in the output object.

Please check for the error below

The error is coming from jsonp chunk loading:

)

Looks like variable currentUpdateRuntime, currentUpdate are both undefined.

Other relevant information:
webpack version: 5.69.1
Node.js version: v12.22.1
Operating System: Windows

[vankop]

$ yarn start                                                                                                                                                        [14:02:21]
yarn run v1.22.18
$ SET NODE_OPTIONS=--max_old_space_size=4096 && yarn msdyn365b start local --use-eslint
/bin/sh: SET: command not found
error Command failed with exit code 127.

[utkanpar]

Hi @vankop , the package was developed in windows, since you are using Mac, in the package.json you will want to replace "SET" with 'set' (lowercase) or you can pull in the latest from the repo branch (https://github.com/utkanpar/Webpack-HMR-properties-undefined-error). I have updated the package.json there to work on Mac.

The reason you see that error is because:
Since the package was developed in Windows and Windows isn't case-sensitive, but bash is.

[utkanpar]

Hi @vankop , checking to see if you were able to run the repro repo?

[utkanpar]

Hi @vankop , pinging again to check if you were able to run the repo?

[utkanpar]

Hello @vankop / @alexander-akait, are you running into any issues running the repo?

[f3ndot]

Hi @vankop @alexander-akait I've come across this whilst learning about Webpack, going through the guide near verbatim. I've created a reproducible repo here: https://github.com/f3ndot/webpack-currentupdate-undefined

Let me know if you need more information or to try stuff in the repo

[vankop]

@f3ndot
your html file (index.html) content looks like

<html>
  <head>
    <meta charset="utf-8">
    <title>TypeScript Playground</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script defer src="index.bundle.js"></script><script defer src="print.bundle.js"></script>
</head>
  <body>
  </body>
</html>

Note both entrypoints are presented in html file and that is wrong.. You can setup html plugin to create html file per entrypoint

[vankop]

not sure but maybe dependOn option could help here https://webpack.js.org/configuration/entry-context/#entry-descriptor

UPD: Yeah, this setting helps.

[f3ndot]

Hey @vankop I'm a little confused by your response, since I was following the Webpack 5 Guide near verbatim:

1. That .html file was generated by HtmlWebpackPlugin
2. The guide indicated to specify an entrypoint: {} object with both an index and print property/entry whilst using the webpack plugin. Seems to suggest the expected result is a single .html referencing the two entrypoints.
3. The next page in the guide instructs how to setup the dev server/use watch mode, where the config.js shown begins to match mine more or less. It was around this point I experienced the issues.

So did I make a mistake following the guide, or is the guide incorrect for how one is supposed to use these concepts. Does the guide need to be updated to reflect what's necessary to make this work? More broadly: am I to understand it's incorrect to just have 2+ entrypoints be used in a single .html file for hot update?

[f3ndot]

Ah I see. Reading further, I see this passage on the Code Splitting's Entry dependencies section of the guide:

If we're going to use multiple entry points on a single HTML page, optimization.runtimeChunk: 'single' is needed too, otherwise we could get into trouble described here.

So to me this seems like a small update is necessary to the prior chapter/section of the guide (Development) to state the same thing so if someone uses the dev server/webpack watch for hot reloads, it won't bug out. That is, explicitly, have the webpack.config.js in the prior chapter have the { optimization: { runtimeChunk: 'single' } added. In other words, following the guide verbatim start to finish, people will experience what I did until they ignore and move on to the code splitting section.

[f3ndot]

To help future noobs not get tripped up by this like I did, submitted a PR against the Development section of the guide: webpack/webpack.js.org#6098

[nico-ledesma]

I stumbled across this problem too, not a typical setup, but just in case it helps someone else, this is what happened:

• HTML was generated an Express server.
• WebpackDevServer was serving assets, and proxying everything else to the Express server.
• When bundling, I was creating a custom manifest with WebpackManifestPlugin.
• Express server would read this manifest and print relevant <script> tags in HTML.

It turns out that [hash].hot-update.js scripts were being written to the manifest, and output to the HTML file, causing that error.

Filtering those files fixed everything ✌️

[vankop]

remove hmr plugin in production mode

[rickgladwin]

It turns out that [hash].hot-update.js scripts were being written to the manifest, and output to the HTML file, causing that error.

Filtering those files fixed everything ✌️

If you can recall, where did you set up the filter? In the main webpack config itself? Or in a WebpackDevServer config?
Thanks!

[nico-ledesma]

I was using a custom generator function, and did something like this:

const manifestGenerator = ( seed, files, entries ) => {
	const manifest = {};

	// ...

	Object.keys( entries ).forEach( entryPoint => {
		const entryPointFiles = entries[ entryPoint ];
		const jsAssetRegexp = /(?<!hot-update).js$/;
		entryPointFiles.forEach( fileName => {
			if( jsAssetRegexp.test( fileName ) ) {
				// These are the JS files you want in your manifest
			}
		} );
	} );

	// ...

	return manifest;
}

Hope it helps!

[rickgladwin]

🙏🏻 !!

[skrat]

I am hitting this error. I have multiple entry points, and very simple service worker entry point. But using runtimeChunk: 'single' results in my service worker not working. I've no idea how. Here's the worker, the fetch handler is never fired with runtimeChunk: 'single', but works fine without it, but then HMR breaks:

const CARDS = CARDS_DATA;

const listing = (prefix) =>
  Object.keys(CARDS)
    .filter(p => p.startsWith(prefix))
    .map(p => p.substring(prefix.length))
    .sort().join("\n")

const PATTERNS = [
  ["/cards/user", { body: listing("/user/") }],
  ...Object.entries(CARDS).map(([k, v]) => (
    ["/cards" + k, { body: v }]
  ))
];

self.addEventListener("install", () => {
  console.log("[SW] Service worker installed");
  self.skipWaiting();
});

self.addEventListener("activate", (event) => {
  console.log("[SW] Service worker activated");
  event.waitUntil(clients.claim());
});

self.addEventListener("fetch", (event) => {
  const url = new URL(event.request.url);
  for (const [p, val] of PATTERNS) {
    if (p === url.pathname) {
      console.log(`[SW] fetch ${event.request.method} - ${url.pathname}`);
      if (event.request.method === "GET") {
        event.respondWith(new Response(val.body));
      } else if (event.request.method === "POST") {
        (async () => {
          val.body = await event.request.text();
        })();
        event.respondWith(new Response())
      }
      break;
    }
  }
});