build.css.modules.compileType: "icss" breaks HMR since nuxt@2.15.4

[lihbr]

TL;DR; Temporary Fix

You're likely experiencing this issue if you're:

• On Nuxt 2.15.4 or later;
• Using PostCSS 8 (if you're using @nuxtjs/tailwindcss 4, your are).

Disabling icss compile type in your build options should fix the issue (but might introduce others if you're relying on SASS, see: nuxt/nuxt#9014):

// nuxt.config.js
export default {
	/* ... */

	build: {
		loaders: {
			css: {
				modules: false,
			},
		},
	}
}

Versions

• nuxt: v2.15.4 and above (tested on v2.15.8 also)
• node: v16.13.0

About

Hey there, this is a compilation of the following issues (I'm pretty sure they all relate to this one, although debunking may happen):

• WSL: Hot reloading issue nuxt#5550 (only comments after this one: WSL: Hot reloading issue nuxt#5550 (comment))
• Hot reloading does not work for HTML templates nuxt-modules/tailwindcss#357

Basically what's happening is that HMR is broken on Nuxt builds relying on PostCSS 8 since the change to css-loader compile type on Nuxt 2.15.4:

• Related PR: fix(config): compile type compatibility in css-loader v4 nuxt#9014
• Changelog: https://github.com/nuxt/nuxt.js/releases/tag/v2.15.4

Disabling icss brings HMR back to life.

Reproduction

minimal.zip

Steps to reproduce

1. Download zip and extract
2. Install dependencies with npm (or Yarn, but they are already resolved with npm 😉)
3. Launch dev server
4. Try editing the div's text in ~/pages/index.vue
5. HMR doesn't work

   Testing temporary fix:

6. Uncomment lines 17-23 inside nuxt.config.js
7. Try editing the div's text again in ~/pages/index.vue
8. HMR works

What is Expected?

HMR should be working~

What is actually happening?

HMR doesn't work 😱

Let me know if anything!

[henrythc]

you save my life!!!!!!!!!!!!!!