"webpackHotUpdate is not defined" error when using extractCSS option

Environment

• Operating System: Linux
• Node Version: v14.17.6
• Nuxt Version: 2.16.0-27226092.034b9901
• Package Manager: Yarn
• Bundler: Webpack
• User Config: css, build, buildModules
• Runtime Modules: -
• Build Modules: @nuxt/bridge@3.0.0-27245975.d1214c9

Describe the bug

When you add some css file to the css array and then turn on the build.extractCSS option in the nuxt config then change some template's content, the page will fully reload instead of updating the page itself and in the console you will see the following error:

Also I won't be surprised if this warning has some relation to this issue

Note that this bug goes away after you edit the template again. In a different project I had it stick for pretty much forever, though I'm not yet sure what causes it to stick, I'll try to create a minimal reproduction of it too if needed. I'm hoping that if this one is fixed, it might also fix it sticking around.

Reproduction

https://codesandbox.io/s/suspicious-pasteur-ycqi3?file=/pages/index.vue

Additional context

No response

Logs

No response

Start with the linked CodeSandbox reproduction and its pages/index.vue, enabling build.extractCSS while editing the template. Inspect the Nuxt Bridge/Webpack build and HMR paths handling the css and build configuration; done means template edits update without a full reload or webpackHotUpdate error, with regression coverage if an existing test path is found.