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)