v-if will report an error in the vite production environment

[ekkotest]

Vue version

^3.4.26

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-dxqht5?file=src%2FApp.vue,src%2Fcomponents%2Ftest.svg,package.json,src%2Fmain.js&terminal=dev

Steps to reproduce

npm run preview , but in this demo i dont know how to show previw

What is expected?

no error: TypeError: Cannot read properties of null (reading 'insertBefore')
at insert (main-25115900.js:17:178)

What is actually happening?

TypeError: Cannot read properties of null (reading 'insertBefore')
at insert (main-25115900.js:17:178)
at C (main-25115900.js:13:38292)
at y (main-25115900.js:13:37900)
at N (main-25115900.js:13:44713)
at W (main-25115900.js:13:43277)
at E (main-25115900.js:13:39866)
at w (main-25115900.js:13:38654)
at y (main-25115900.js:13:38004)
at N (main-25115900.js:13:43762)
at W (main-25115900.js:13:43277)

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M2
    Memory: 214.86 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v16.17.1/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
    pnpm: 8.14.1 - ~/.nvm/versions/node/v16.17.1/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.119
    Safari: 17.4.1
  npmPackages:
    vue: ^3.4.26 => 3.4.26

Any additional comments?

I want to switch the v-if state after one second

[edison1105]

duplicate of #10747?

[daniluk4000]

Finally someone reported this.

You seem to not use teleport, I don't use it as well, but I have this weird error in my code. And I have no idea why that happens honestly.

[yyx990803]

Can't reproduce from your repro link. (I built the project locally with Vite)

[daniluk4000]

For me I was able to reproduce randomly, in production only, and nothing in stacktrace could give a hint.

I'll try to make repro later with same template stucture. If anyone will be able to find proper repro earlier it would be nice.

[damms005]

tldr;
Add v-if to the parent of where things are blowing up for you

I have a monkey-patch that works for me.

In my case, in [call to insertBefore](

core/packages/runtime-dom/src/nodeOps.ts

Line 12 in 4619461

parent.insertBefore(child, anchor || null)

, I console logged the function arguments and inspected them. I noticed that the parentNode and parentElement property were null in the preceeding call to the same function (it was called twice)

I was sure I wasn't manipulating the parent, but the node to be inserted was an element in v-for.

So, I added a v-if to the parent. I only ensured that the v-if evaluates to true when there are items to iterate in the children v-for.

[daniluk4000]

This happens for me also in v-for so I'll try it out and write back here

[daniluk4000]

All right this one of weirdest bugs I have experienced.

This is perfectly valid code. Placed inside scoped slot if this matters on few levels deep.

This v-if is present when it's false. Then we switch it to true.

Gone and crashed.

Turns out the error was in getHoursAndMinutes. It's content:

export function getHoursAndMinutes(date: number) {
    const diff = Math.abs(useStore().datetime - date) / (1000 * 60);

    return `${ (`0${ Math.floor(diff / 60) }`).slice(-2) }:${ (`0${ Math.floor(diff % 60) }`).slice(-2) }`;
}

Fixed by moving this from template to computed. I don't know what's going on here tbh, but I've tried to give you as much info as I can. Also didn't reproduce with replacing second v-if to v-show, didn't reproduce when changing function to return some random string or date.

[ekkotest]

Can't reproduce from your repro link. (I built the project locally with Vite)

https://stackblitz.com/edit/vitejs-vite-dxqht5?file=src%2FApp.vue,src%2Fcomponents%2Ftest.svg,package.json,src%2Fmain.js&terminal=dev

I updated the code, and you can try it again, comment almost any other code, and the bug won't recur

[ShuangDa1018]

For me I was able to reproduce randomly, in production only, and nothing in stacktrace could give a hint.

I'll try to make repro later with same template stucture. If anyone will be able to find proper repro earlier it would be nice.

the demo change, now npm run preview will report error like your code