core icon indicating copy to clipboard operation
core copied to clipboard

Render error in `processFragment` when NODE_ENV=production

Open dorian-marchal opened this issue 1 month ago • 1 comments

Vue version

3.4.30

Links to minimal reproduction

Steps to reproduce

git clone https://github.com/dorian-marchal/vue-repro
cd vue-repro
npm install
# /!\ NODE_ENV=production is important to reproduce the issue
NODE_ENV=production npm run build && npm run preview
# or even
NODE_ENV=production npm run dev

Navigate to http://localhost:5173/, open your devtools' console. Then, click twice on the "toggle expand" button.

What is expected?

No error, the component toggles between "open" and "closed" when the button is clicked.

What is actually happening?

You'll get this error in the console, then the button is broken:

TypeError: Cannot read properties of null (reading 'insertBefore')
    at insert (runtime-dom.esm-bundler.js:16:12)
    at processFragment (runtime-core.esm-bundler.js:4924:7)
    at patch (runtime-core.esm-bundler.js:4442:9)
    at patchKeyedChildren (runtime-core.esm-bundler.js:5549:11)
    at patchChildren (runtime-core.esm-bundler.js:5331:11)
    at patchElement (runtime-core.esm-bundler.js:4760:7)
    at processElement (runtime-core.esm-bundler.js:4599:7)
    at patch (runtime-core.esm-bundler.js:4456:11)
    at patchKeyedChildren (runtime-core.esm-bundler.js:5417:9)
    at patchChildren (runtime-core.esm-bundler.js:5331:11)

System Info

No response

Any additional comments?

We encountered an error while migrating an app from Vue 2 to Vue 3.

The code doesn't make much sense because I started from a real world app and removed all I could to get a minimal repro.

I'm not sure if there is a bug in Vue or Vite, but:

  • There is no error when we don't set NODE_ENV to production.
  • There is no error when isReady is part of the v-for key, e.g.: :key="value + isReady".

dorian-marchal avatar Jun 27 '24 11:06 dorian-marchal