Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack 5 HMR Issue: Cannot set property './index.js' of undefined

See original GitHub issue

Bug report

What is the current behavior?

In Webpack 5, when I am using webpack-hot-middleware and HotModuleReplacementPlugin, then if I make a change in one of my JavaScript files and refresh my web app, I receive the error Uncaught TypeError: Cannot set property './index.js' of undefined in the file jsonp_chunk_loading.

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

I created a minimal repo to reproduce the issue here: https://github.com/smparsons/webpack-hmr-issue. Steps to reproduce are in the README file.

What is the expected behavior?

I would expect to not receive the above error after making a change in my code and refreshing my web app.

Other relevant information: webpack version: 5.0.0-beta.15 Node.js version: 11.10.1 Operating System: macOS Catalina Version 10.15 Additional tools:

Issue Analytics

State:
Created 3 years ago
Comments:8 (7 by maintainers)

Top GitHub Comments

2reactions

chenxsancommented, Apr 28, 2020

Looks like same problem I have:

I’ve left a note here https://github.com/webpack/webpack/issues/10534 waiting for feedback.

1reaction

sokracommented, Apr 28, 2020

@jantimon HTML looks like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
<script src="scripts/main.2e4e6e36937f0a3989bd.js"></script><script src="main.abf4d034b3614387dfd4.hot-update.js"></script></head>
<body>
    <div id="content"></div>
</body>
</html>

<script src="main.abf4d034b3614387dfd4.hot-update.js"></script> should not be there. Maybe filter out assets that have hotModuleReplacement or development flagged.

I was able to fix it by adding these lines at https://github.com/jantimon/html-webpack-plugin/blob/96e0ae607afa7295c40d0a5073c791189def6337/index.js#L581-L583

       const entryPointPublicPaths = entryPointFiles
+        .filter(chunkFile => {
+          const info = compilation.getAsset && compilation.getAsset(chunkFile).info;
+          return !(info && (info.hotModuleReplacement || info.development));
+        })
         .map(chunkFile => {
           const entryPointPublicPath = publicPath + this.urlencodePath(chunkFile);

Top Results From Across the Web

Webpack 5 HMR throws Uncaught TypeError: cannot set ...

The solution was: Remove the CSS line from Webpack config: entry: { [bundleNames.js]: path.join(__dirname, `${assetsDir}/js/app.js`), ...

Hot Module Replacement - webpack

This guide extends on code examples found in the Development guide. Hot Module Replacement (or HMR) is one of the most useful features...

gaearon/react-hot-loader - Gitter

react-hot-loader fails for me with the following error. bundle.js:30 Uncaught TypeError: Cannot read property 'webpackHotUpdate' of undefined.

Mix, npm run hot, browser crash: Uncaught TypeError

This is Laravel Framework 6.0.3, npm version 6.9.0, Fedora 29, webpack ... app.js:727 Uncaught TypeError: Cannot read property 'call' of undefined at ...

typeerror: cannot set properties of undefined created() - You.com

https://github.com/chenmingzhen/Webpack-HMR-export-array-config-hotUpdate-undefined I created a repo to reproduce the problem. The Webpack configuration I ...