Vite Hot Reload not working

[Miguelklappes]

Describe the bug

HMR is not working as it should, nothing in the page is updated unless I do a browser refresh (F5). Thought it was the Tailwind thing with Vite, turns out it wasn't.

Reproduction

Repository

System Info

 System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i3-1005G1 CPU @ 1.20GHz
    Memory: 112.30 MB / 3.80 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    @vitejs/plugin-vue: ^1.2.3 => 1.2.3
    vite: ^2.3.8 => 2.3.8

Used package manager: YARN

Logs

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[arpowers]

Just adding that I've had similar problems recently, although haven't had time to thoroughly debug. We are also using Tailwind.

[Clee681]

Same here. Was having to refresh using latest Vite, SvelteKit, and Tailwind CSS.

[timmaier]

+1 Same here was working fine before on version 2.3.6 but bumping to 2.3.8 and stopped working.

[xiBread]

+1; using Tailwind. Had to disable JIT mode for it to reload my components again.

[drdilyor]

hacked @OneNail 's pr into node_modules and issue fixed, thanks a lot! we have to wait for devs to merge it now

[y1d7ng]

same issue #3716

[focussing]

same issue; disabling JIT mode does not help in my case.

[Shinigami92]

@focussing Seems that this was release in the beta v2.4.0-beta.1, could you try out the newest beta v2.4.0-beta.3?

[focussing]

@Shinigami92 I tried it; the warning has not come up yet; but changes in component CSS are not updated although console says [vite] hot updated: /src/components/Machine.vue

[patak-dev]

@focussing could you open a new issue with a minimal reproduction? Thanks!

[focussing]

@Shinigami92 @patak-js Sorry, but the warning did come up again. When I do a full reload it works fine.

[vite] hot updated: /src/views/Reports.vue
runtime-core.esm-bundler.js:548 TypeError: Cannot read property 'nextSibling' of undefined
    at nextSibling (runtime-dom.esm-bundler.js:35)
    at patchStaticNode (runtime-core.esm-bundler.js:4742)
    at patch (runtime-core.esm-bundler.js:4673)
    at patchKeyedChildren (runtime-core.esm-bundler.js:5433)
    at patchChildren (runtime-core.esm-bundler.js:5376)
    at patchElement (runtime-core.esm-bundler.js:4967)
    at processElement (runtime-core.esm-bundler.js:4776)
    at patch (runtime-core.esm-bundler.js:4681)
    at componentEffect (runtime-core.esm-bundler.js:5293)
    at Object.reactiveEffect [as update] (reactivity.esm-bundler.js:42)
(anonymous) @ runtime-core.esm-bundler.js:548
(anonymous) @ Reports.vue:26
(anonymous) @ client.ts:424
(anonymous) @ client.ts:345
(anonymous) @ client.ts:205
queueUpdate @ client.ts:205
async function (async)
queueUpdate @ client.ts:201
(anonymous) @ client.ts:72
handleMessage @ client.ts:70
(anonymous) @ client.ts:44
runtime-core.esm-bundler.js:549 [HMR] Something went wrong during Vue component hot-reload. Full reload required.
(anonymous) @ runtime-core.esm-bundler.js:549
(anonymous) @ Reports.vue:26
(anonymous) @ client.ts:424
(anonymous) @ client.ts:345
(anonymous) @ client.ts:205
queueUpdate @ client.ts:205
async function (async)
queueUpdate @ client.ts:201
(anonymous) @ client.ts:72
handleMessage @ client.ts:70
(anonymous) @ client.ts:44
client.ts:348 [vite] hot updated: /src/views/Reports.vue

[Miguelklappes]

@Shinigami92 @patak-js Sorry, but the warning did come up again. When I do a full reload it works fine.

[vite] hot updated: /src/views/Reports.vue
runtime-core.esm-bundler.js:548 TypeError: Cannot read property 'nextSibling' of undefined
    at nextSibling (runtime-dom.esm-bundler.js:35)
    at patchStaticNode (runtime-core.esm-bundler.js:4742)
    at patch (runtime-core.esm-bundler.js:4673)
    at patchKeyedChildren (runtime-core.esm-bundler.js:5433)
    at patchChildren (runtime-core.esm-bundler.js:5376)
    at patchElement (runtime-core.esm-bundler.js:4967)
    at processElement (runtime-core.esm-bundler.js:4776)
    at patch (runtime-core.esm-bundler.js:4681)
    at componentEffect (runtime-core.esm-bundler.js:5293)
    at Object.reactiveEffect [as update] (reactivity.esm-bundler.js:42)
(anonymous) @ runtime-core.esm-bundler.js:548
(anonymous) @ Reports.vue:26
(anonymous) @ client.ts:424
(anonymous) @ client.ts:345
(anonymous) @ client.ts:205
queueUpdate @ client.ts:205
async function (async)
queueUpdate @ client.ts:201
(anonymous) @ client.ts:72
handleMessage @ client.ts:70
(anonymous) @ client.ts:44
runtime-core.esm-bundler.js:549 [HMR] Something went wrong during Vue component hot-reload. Full reload required.
(anonymous) @ runtime-core.esm-bundler.js:549
(anonymous) @ Reports.vue:26
(anonymous) @ client.ts:424
(anonymous) @ client.ts:345
(anonymous) @ client.ts:205
queueUpdate @ client.ts:205
async function (async)
queueUpdate @ client.ts:201
(anonymous) @ client.ts:72
handleMessage @ client.ts:70
(anonymous) @ client.ts:44
client.ts:348 [vite] hot updated: /src/views/Reports.vue

Mine eventually worked, but does a full page reload most of the time with no apparent errors, guess I'll just stick with it for now