HMR (with Vite) randomly skip updates and stop working

[mkhennoussi]

Environment

Nuxt CLI v3.0.0-27236898.4a34c2a
RootDir: G:\PROJECTS\Testing\NUXT\nuxt3-app
Nuxt project info:

------------------------------
- Operating System: `Windows_NT`
- Node Version:     `v16.8.0`
- Nuxt Version:     `3-3.0.0-27236898.4a34c2a`
- Package Manager:  `Yarn`
- Bundler:          `Webpack`
- User Config:      `-`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

Describe the bug

HMR with Vite randomly skip updates, I mean some (random I guess) updates on the code don't show up on the browser.

Reproduction

Just use the basic generated app from the CLI and add/remove some code in the template part of app.vue.
Repeat that until you notice that some updates on the code don't show up on the browser.
It is more noticeable if you work fast with tailwindcss/windicss.

Additional context

No response

Logs

No response

[mkhennoussi]

Updates :

1. I have these errors in the browser console :

runtime-core.esm-bundler.js:140 TypeError: Cannot set properties of null (setting 'textContent')
    at setElementText (runtime-dom.esm-bundler.js:33)
    at patchChildren (runtime-core.esm-bundler.js:4378)
    at patchElement (runtime-core.esm-bundler.js:3902)
    at processElement (runtime-core.esm-bundler.js:3753)
    at patch (runtime-core.esm-bundler.js:3670)
    at patchKeyedChildren (runtime-core.esm-bundler.js:4443)
    at patchChildren (runtime-core.esm-bundler.js:4386)
    at patchElement (runtime-core.esm-bundler.js:3902)
    at processElement (runtime-core.esm-bundler.js:3753)
    at patch (runtime-core.esm-bundler.js:3670)

and

runtime-core.esm-bundler.js:141 [HMR] Something went wrong during Vue component hot-reload. Full reload required.

2. Old components/HTMLElements are not updated until you completely refresh the page. For instance, even if you add components/HTMLElements, the updates on the browser only occurs for the new added code, ie:

If you begin with:

<div>Nuxt</div>

then modify the div and add a paragraph in your code like :

<div>Nuxt 3 looks promising</div>
<p>But it is still in Beta</>

You will have in the browser :

<div>Nuxt</div>
<p>But it is still in Beta</>

Hope this helps !

[gustojs]

I have a similar issue with Nuxt 3, where the HMR updates are randomly skipped or even stopped at all.

Nuxt 3.0.0-27249044.7d918e1
Windows 10
Node 16.11.1
npm 8.0.0

Provided a component below, if I change to onClick2 in the template or comment out either console.log or counter.value++, most of the time the changes are not being picked up, even when there are comments about successful rebuild or (more randomly) HMR update.

There are no errors in the console. In an adequate new pure Vite project it works as it should.

Link to reproduction: https://github.com/gustojs/nuxt3-repro-1036

<template>
  <p>{{ counter }}</p>
  <button @click="onClick1">click me</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
const counter = ref(0);

function onClick1() {
  console.log("onClick1");
  counter.value++;
}
function onClick2() {
  console.log("onClick2");
  counter.value++;
}
</script>

[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)

[productdevbook]

css some problem

[void0err]

+1 I face this problem as well.

[mortbauer]

Just started with the nuxt3-app template and have the same issue

[ryanaltvater]

I'm not sure if this is related/helpful or not, but I'm experiencing similar issues with HMR and components specifically. When adding a new component and calling it on a page, HMR doesn't appear to be watching/rendering the new component. I get the errors...

[Vue warn]: Failed to resolve component: Test
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

 ERROR  [worker] Invalid value used as weak map key                                                                                                                                                                                                                                                         16:54:01

  at WeakMap.set (<anonymous>)
  at normalizePropsOptions (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2694:11)
  at createComponentInstance (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6150:23)
  at renderComponentVNode (node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:197:22)
  at Module.ssrRenderComponent (node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:623:12)
  at _sfc_ssrRender (.nuxt/dist/server/server.mjs:2201:31)
  at renderComponentSubTree (node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:263:13)
  at renderComponentVNode (node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:214:16)
  at renderVNode (node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)
  at renderVNode (node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:310:17)


 ERROR  [proxy] socket hang up                                                                                                                                                                                                                                                                              16:54:01

  at connResetException (node:internal/errors:691:14)
  at Socket.socketOnEnd (node:_http_client:466:23)
  at Socket.emit (node:events:402:35)
  at Socket.emit (node:domain:475:12)
  at endReadableNT (node:internal/streams/readable:1343:12)
  at processTicksAndRejections (node:internal/process/task_queues:83:21)


 ERROR  [proxy] connect ENOENT /var/folders/9z/gp3ygr3x7qn5j46r_4nvmvtm0000gn/T/nitro/worker-57099-13.sock                                                                                                                                                                                                  16:53:39

  at PipeConnectWrap.afterConnect [as oncomplete] (node:net:1157:16)

In order to get a new component to render at all with HMR working properly again, I have to stop and restart the server.

[moh1434]

For me HMR dose not work in fresh npx nuxi init nuxt3-app project.

<template>
  <div>
    {{ testVar }}
  </div>
</template>

<script setup>
const testVar = ref("some text");
</script>

If i remove const testVar line, i will see Vite server built in 84ms but nothing will change in the browser(also vue dev-tools will still show testVar:"some text" even when i click force refresh icon).

note: this problem only for javascript(editing html tags inside <template></template> works + editing css inside <style></style> also works)

[huuhait]

it's still not fixed?

[Atinux]

@antfu can you take a look at it after your holidays?

[danielroe]

see also #13325

[WSlim4]

I'm having this problem too, using nuxt3 default template

[OlegIvaniv]

For me also HMR is broken after starting a new project via nuxi init.

[antfu]

I am investigating this.

I can reliably reproduce this behavior in https://github.com/nuxt/modules by editing the TheHeader.vue file. Client console emits this error:

From what I can see the error is caused by Vue failing to retrieve the DOM el on HMR. Which I suspect would be caused by some hydration mismatch. However, I still can't locate the root cause yet.

For everyone in this thread, I would be appreciated to receive a minimal reproduction repo or Stackblitz as I can't reproduce it with the starter template myself. Thanks ahead!

[productdevbook]

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

[antfu]

After investigating with @danielroe, this might actually cause by two different issues.

1. For skipped HMR with no errors, it might be caused by multiple Nuxt/Vite instances running and connected to the wrong instance for HMR. The fixed is ready at fix(vite): assign different hmr port for each instance framework#3169
2. For the error of setting nodeValue on null, that I and @productdevbook faced, it's actually a Vue SSR bug which I will do more research and made the fix for upstream. Track on Hydration fail to retrieve hoisted el in HMR vuejs/core#5405, PR fix(runtime-core): always hydrate hosited children for HMR vuejs/core#5406

[productdevbook]

Hi @antfu,

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

upgrade new vue 3.2.31 and all dependencies. (yarn.lock delete and re-install).

Hot reload fixed but, text, background color change but dont hot reload change.

[Of3lia]

If helps for something, I was having this same problem on a Vue 3 Vite + typescript project, and fixed it by undoing the last thing I did that was exporting something from main.js and importing it on other places of my project, so I moved it to a pinia store and im using it from the state now hot reload is working fine

[nopeless]

Just in case some developer stumbles upon this I emptied cache and hard reloaded it works again

[markus-gx]

Comments above seemed not to work for me.
What helped was to deactivate ssr in the Nuxt Config.

ssr: false

Worked fine after that. (Develop purpose only)

[sebpalluel]

Just in case some developer stumbles upon this I emptied cache and hard reloaded it works again

That fixed it for me (in chrome's dev tool, Application/Storage => Clear site data), disabling ssr had no effect. If you are using docker, don't forget to open the port 24678 that is used by default for vite HMR.

[Zac-Zajdel]

Just in case some developer stumbles upon this I emptied cache and hard reloaded it works again

Lol this worked for me. The good ole "Did you try to unplug it and plug it back in again." Thank you!

[andrecampll]

Comments above seemed not to work for me. What helped was to deactivate ssr in the Nuxt Config.

ssr: false

Worked fine after that. (Develop purpose only)

Thanks! It worked fine here :)

[scratchmex]

For me the problem was that I was importing import { Component } from 'vue' to annotate some component. The error appeared to be hidden until I deactivated ssr: false. This was the strangest bug of the month. @antfu sorry for pinging but are you able to reproduce? I attach a photo of the error in the console. Btw, no error shows in the terminal

[antfu]

@scratchmex Please create a new issue with a minimal reproduction for us to track, thanks.

[0fatihyildiz]

I created a new nuxt 3 project and I had this problem, but only the files in the pages directory were not hot reloaded. For this I tried replacing the 'Pages' filename with 'pages' and it worked.

[wokalek]

24678

thanks mate!

[IkaroFox]

That fixed it for me (in chrome's dev tool, Application/Storage => Clear site data), disabling ssr had no effect. If you are using docker, don't forget to open the port 24678 that is used by default for vite HMR.

@sebpalluel, thanks, open the port 24678 solved my problem 😅 (im using docker with wsl 2 )