Hot Reload doesn't work

[productdevbook]

Environment

---

• Operating System: Darwin
• Node Version: v16.13.0
• Nuxt Version: 3.0.0-27255771.f78ec93
• Package Manager: Yarn
• Bundler: Vite
• User Config: buildModules, build
• Runtime Modules: -
• Build Modules: @pinia/nuxt@0.1.0

---

Describe the bug

CleanShot.2021-10-27.at.22.58.59.mp4

Reproduction

https://github.com/productdevbook/nuxt3-app

Additional context

This seems to me to be in vite. because when I translate css, it fixes the project. There seems to be a problem with compiling Sass. but we're not entirely sure

Logs

✔ Vite server built in 111ms
(node:15424) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

[zecka]

I got same issue #11964
But this bug is also on Vue3 app create with vue create. Seems not related to nuxt 3.

[lukaszflorczak]

There seems to be a problem with compiling Sass

@productdevbook There was a problem with Sass hot reloading, fixed here: vitejs/vite#5422.
The problem was in @vitejs/plugin-vue package. Maybe check you have a version with this fix (^1.9.4).

[productdevbook]

There seems to be a problem with compiling Sass

@productdevbook There was a problem with Sass hot reloading, fixed here: vitejs/vite#5422. The problem was in @vitejs/plugin-vue package. Maybe check you have a version with this fix (^1.9.4).

yes 1.9.4 but some problem

[crotanite]

Not sure if this is the same problem that I had, but adding:

vite: {
  server: {
    watch: {
      usePolling: true
    }
  }
}

to nuxt.config fixed my HMR issue.

[ruslankonev]

Confirm HMR not work
Nuxt 3.0.0-27255771.f78ec93

Not sure if this is the same problem that I had, but adding:

vite: {
  server: {
    watch: {
      usePolling: true
    }
  }
}

to nuxt.config fixed my HMR issue.

not work for me

[danielroe]

closing to follow in #11956

[FabioDavi]

I had the same problem but, doing nothing to fix.. I discover it works only at Network: http://172.21.21.166:3000/ and not at Local: http://localhost:3000/

[mirumirumi]

For all those for whom HMR does not work in WSL2,

First, as @FabioDavi said, access with IP ( 172.26.21.102 etc...) instead of localhost. to access the dev server.
Next, add the following to nuxt.config.ts as often mentioned in other threads.

  vite: {
    server: {
      watch: {
        usePolling: true, 
      },
    },
  },

This makes HMR working fine in my case!

(This workaround may cause Vue to issue a hydration warning if a hot reload rewrites an HTML element.
But I believe this is not inherently a problem in the sense that I want to visually see the code changes.)

[RodrigoReyes-vw]

none of the solutions seems to work for me, any other ideas?

[ymansurozer]

I had the same problem but, doing nothing to fix.. I discover it works only at Network: http://172.21.21.166:3000/ and not at Local: http://localhost:3000/

This is the only thing that worked after trying everything in this thread and #11956. I finally have a working HMR!

[Thorin217]

For all those who still have the problem,

Make sure you haven't created a configuration file without the default export.

Example: (app.config.ts)

and they always check the browser console for some error.