"webpackHotUpdate is not defined" error when using extractCSS option

[Luffyyy]

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/[email protected]

---

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

[ThomasBerne]

I found a workaround by adding this in nuxt.config.ts:

build: {
    optimization: {
      runtimeChunk: true,
      splitChunks: {
        name: true,
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }

I'm using nuxt bridge.

[danielh-official]

I found a workaround by adding this in nuxt.config.ts:

build: {
    optimization: {
      runtimeChunk: true,
      splitChunks: {
        name: true,
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }

I'm using nuxt bridge.

I had the same issue and did this. Worked like a charm.

[enkot]

I also have this issue, but when disable nitro - it works fine:

export default defineNuxtConfig({
  ...
  bridge: {
    nitro: false,
  }
})

[dargmuesli]

The workaround creates a single css file, right? So one should note a potential performance decrease.

[Suniron]

This is the updated config for the recent Nuxt Bridge versions:

{
    build: {
        optimization: {
          splitChunks: {
            cacheGroups: {
              styles: {
                name: 'styles',
                test: /.(css|vue)$/,
                chunks: 'all',
                enforce: true,
              },
            },
          },
        },
    }
}