core
core copied to clipboard
Render error in `processFragment` when NODE_ENV=production
Vue version
3.4.30
Links to minimal reproduction
- Vue SFC Playground (thanks @yangxiuxiu1115)
- https://github.com/dorian-marchal/vue-repro
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
toproduction
. - There is no error when
isReady
is part of thev-for
key, e.g.::key="value + isReady"
.