Skip to content

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

@lihbr

Description

@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):

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:

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions