Next.js: [dev mode bug: 8.0.0-canary.10-17] Uncaught ReferenceError: webpackHotUpdate is not defined

[4cm4k1]

Bug report

Describe the bug

Beginning with 8.0.0-canary.10 (I think?) through the current canary version, running a Next app in dev mode results in an Uncaught ReferenceError: webpackHotUpdate is not defined error in the console, pointing to line 1 of _next/static/webpack/static/runtime/main.js.[hash].hot-update.js. This causes the page to refresh every few seconds, which makes development with hot reloading nearly impossible.

Importantly, this does not affect Next at all in production and/or serverless mode.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone my repo: git clone https://github.com/4cm4k1/personal-website
2. In your terminal, use yarn command to install dependencies: yarn
3. Use package.json script to start dev mode: yarn dev
4. Open Chrome to app (macOS): open http://localhost:3000
5. Open Chrome DevTools (macOS): ⌘+option+i
6. Observe the errors in the Console tab (screenshot below).

Expected behavior

I expected dev mode with hot reloading to work without console errors.

Screenshots

When using yarn dev:

When using yarn dev:proxy:

System information

• OS: macOS 10.14.4
• Browser: Chrome 73.0.3679.0
• Version of Next.js: 8.0.0-canary.10 - 8.0.0-canary.17

Additional context

Also, I use yarn dev:proxy to develop in dev mode with an HTTPS proxy. The error occurs there, too, along with other errors that may be caused by the first one. I’ve attached a screenshot for that as well. If it needs to be tested, you need to install mkcert (brew install mkcert), run yarn gen-dev-certs (this uses mkcert to generate valid SSL certificates for localhost, 127.0.0.1, and ::1), and then you can run yarn dev:proxy (this runs yarn dev and yarn proxy simultaneously).

[Clebal]

I've got the same error but in Next.js 7.0.2. I'm not sure that this error is from Next.js, I think it's from next-offline because I've observed that the error disappears if you remove it from next.config.js.

[4cm4k1]

@Clebal Thank you for this info. I’m going to look into it more and file an issue over in that repo!

[4cm4k1]

Closed because this issue pertains to the aforementioned plugin.

[raymondsze]

@4cm4k1 I get the same error. How do you solve it?

[ibraelillo]

I've checked that indeed when you remove next-offline the error disappears . Then I went to check on the code source for the webpapck plugin of next-offline and seems like they're using an async hook where it should be synchronous...

```
const generateNextManifest = require('./next-manifest');

module.exports = class InlineNextPrecacheManifestPlugin {
constructor(opts) {
this.opts = opts;
}

apply(compiler) {
const errorhandler = err => {
throw new Error(Precached failed: ${err.toString()});
};

if (compiler.hooks) {
  compiler.hooks.done.tap(
    'CopyPlugin',
    async() => generateNextManifest(this.opts), //    !!!!here!!!!
    errorhandler
  );
} else {
  compiler.plugin(
    'done',
    async() => generateNextManifest(this.opts),
    errorhandler
  );
}

}
};
`
``

[themao]

Updating next-offline to 3.3.7 seems to have solved it for me.

[4cm4k1]

@themao is correct.