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