-
Notifications
You must be signed in to change notification settings - Fork 7
Open
Description
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
Steps to reproduce
- Download zip and extract
- Install dependencies with npm (or Yarn, but they are already resolved with npm 😉)
- Launch dev server
- Try editing the div's text in
~/pages/index.vue
- HMR doesn't work
Testing temporary fix:
- Uncomment lines 17-23 inside
nuxt.config.js
- Try editing the div's text again in
~/pages/index.vue
- HMR works
What is Expected?
HMR should be working~
What is actually happening?
HMR doesn't work 😱
Let me know if anything!
moritzruth, oezkancodes, slavanossar, benloeffel, inaschmitz and 2 moredevzom
Metadata
Metadata
Assignees
Labels
No labels