HMR (with Vite) randomly skip updates and stop working #11956

mkhennoussi · 2021-10-14T14:11:16Z

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

The text was updated successfully, but these errors were encountered:

mkhennoussi · 2021-10-15T15:22:32Z

Updates :

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.

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 · 2021-10-23T22:00:17Z

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 · 2021-11-02T11:59:59Z

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/[email protected]

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 · 2021-11-13T09:24:21Z

css some problem

void0err · 2021-11-18T09:18:50Z

+1 I face this problem as well.

mortbauer · 2022-01-12T13:21:12Z

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

ryanaltvater · 2022-01-20T21:48:30Z

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 · 2022-01-25T21:11:12Z

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 · 2022-01-30T16:51:35Z

it's still not fixed?

atinux · 2022-02-01T10:18:43Z

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

danielroe · 2022-02-07T13:27:54Z

see also #13325

WSlim4 · 2022-02-07T23:20:05Z

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

OlegIvaniv · 2022-02-08T16:05:18Z

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

antfu · 2022-02-10T06:00:11Z

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 · 2022-02-10T06:06:52Z

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

antfu · 2022-02-10T14:28:21Z

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

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
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 · 2022-02-13T15:04:40Z

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 · 2022-03-03T20:02:51Z

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 · 2022-04-23T18:46:44Z

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

markus-gx · 2022-05-16T13:54:46Z

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 · 2022-06-01T13:12:56Z

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 · 2022-06-03T01:38:23Z

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 · 2022-06-23T15:16:11Z

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 · 2022-07-15T15:00:33Z

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 · 2022-07-16T06:38:03Z

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

0fatihyildiz · 2022-10-14T15:32:17Z

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 · 2023-04-30T20:48:12Z

24678

thanks mate!

IkaroFox · 2023-09-04T18:23:12Z

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 )

mkhennoussi added bug nuxt3 labels Oct 14, 2021

mkhennoussi changed the title ~~HMR (with Vite) randomly skip updates~~ HMR (with Vite) randomly skip updates and stop working Oct 15, 2021

danielroe mentioned this issue Jan 19, 2023

Hot Reload doesn't work #12662

Closed

productdevbook mentioned this issue Nov 12, 2021

Hot Reload doesn't work for classes change in app.vue productdevbook/oku-nuxt3-template#20

Closed

1 task

productdevbook mentioned this issue Nov 17, 2021

Migrate to Nuxt 3 nuxt/modules#224

Closed

3 tasks

radusuciu mentioned this issue Jan 19, 2023

HMR does not pick up updates to data #12822

Closed

antfu self-assigned this Feb 7, 2022

antfu added the ❗ p4-important label Feb 10, 2022

antfu mentioned this issue Feb 10, 2022

fix(vite): assign different hmr port for each instance nuxt/framework#3169

Merged

7 tasks

This was referenced Feb 11, 2022

Hydration fail to retrieve hoisted el in HMR vuejs/core#5405

Closed

fix(runtime-core): always hydrate hosited children for HMR vuejs/core#5406

Merged

yyx990803 closed this as completed in vuejs/core#5406 Feb 12, 2022

sebpalluel mentioned this issue Jun 1, 2022

Doesn't work with docker container nuxt/vite#172

Open

danielroe added the 3.x label Jan 19, 2023

mkhennoussi mentioned this issue Oct 15, 2021

Vite HMR stops working, when importing a async composable twice #12036

Closed

danielroe transferred this issue from nuxt/framework Jan 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HMR (with Vite) randomly skip updates and stop working #11956

HMR (with Vite) randomly skip updates and stop working #11956

mkhennoussi commented Oct 14, 2021 •

edited

Loading

mkhennoussi commented Oct 15, 2021

gustojs commented Oct 23, 2021 •

edited

Loading

productdevbook commented Nov 2, 2021

productdevbook commented Nov 13, 2021

void0err commented Nov 18, 2021

mortbauer commented Jan 12, 2022

ryanaltvater commented Jan 20, 2022 •

edited

Loading

moh1434 commented Jan 25, 2022 •

edited

Loading

huuhait commented Jan 30, 2022

atinux commented Feb 1, 2022

danielroe commented Feb 7, 2022

WSlim4 commented Feb 7, 2022

OlegIvaniv commented Feb 8, 2022

antfu commented Feb 10, 2022

productdevbook commented Feb 10, 2022

antfu commented Feb 10, 2022 •

edited

Loading

productdevbook commented Feb 13, 2022

Of3lia commented Mar 3, 2022

nopeless commented Apr 23, 2022

markus-gx commented May 16, 2022

sebpalluel commented Jun 1, 2022

Zac-Zajdel commented Jun 3, 2022

andrecampll commented Jun 23, 2022

scratchmex commented Jul 15, 2022

antfu commented Jul 16, 2022

0fatihyildiz commented Oct 14, 2022

wokalek commented Apr 30, 2023

IkaroFox commented Sep 4, 2023 •

edited

Loading

HMR (with Vite) randomly skip updates and stop working #11956

HMR (with Vite) randomly skip updates and stop working #11956

Comments

mkhennoussi commented Oct 14, 2021 • edited Loading

Environment

Describe the bug

Reproduction

Additional context

Logs

mkhennoussi commented Oct 15, 2021

gustojs commented Oct 23, 2021 • edited Loading

productdevbook commented Nov 2, 2021

Environment

Describe the bug

Reproduction

Additional context

Logs

productdevbook commented Nov 13, 2021

void0err commented Nov 18, 2021

mortbauer commented Jan 12, 2022

ryanaltvater commented Jan 20, 2022 • edited Loading

moh1434 commented Jan 25, 2022 • edited Loading

huuhait commented Jan 30, 2022

atinux commented Feb 1, 2022

danielroe commented Feb 7, 2022

WSlim4 commented Feb 7, 2022

OlegIvaniv commented Feb 8, 2022

antfu commented Feb 10, 2022

productdevbook commented Feb 10, 2022

antfu commented Feb 10, 2022 • edited Loading

productdevbook commented Feb 13, 2022

Of3lia commented Mar 3, 2022

nopeless commented Apr 23, 2022

markus-gx commented May 16, 2022

sebpalluel commented Jun 1, 2022

Zac-Zajdel commented Jun 3, 2022

andrecampll commented Jun 23, 2022

scratchmex commented Jul 15, 2022

antfu commented Jul 16, 2022

0fatihyildiz commented Oct 14, 2022

wokalek commented Apr 30, 2023

IkaroFox commented Sep 4, 2023 • edited Loading

mkhennoussi commented Oct 14, 2021 •

edited

Loading

gustojs commented Oct 23, 2021 •

edited

Loading

ryanaltvater commented Jan 20, 2022 •

edited

Loading

moh1434 commented Jan 25, 2022 •

edited

Loading

antfu commented Feb 10, 2022 •

edited

Loading

IkaroFox commented Sep 4, 2023 •

edited

Loading