Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render error in processFragment when NODE_ENV=production #11241

Closed
dorian-marchal opened this issue Jun 27, 2024 · 3 comments
Closed

Render error in processFragment when NODE_ENV=production #11241

dorian-marchal opened this issue Jun 27, 2024 · 3 comments
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.

Comments

@dorian-marchal
Copy link

dorian-marchal commented Jun 27, 2024

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 dorian-marchal changed the title Render error when NODE_ENV=production Render error in processFragment when NODE_ENV=production Jun 27, 2024
@yangxiuxiu1115
Copy link
Contributor

playground

@jh-leong
Copy link
Member

This issue has been fixed in this commit

@yyx990803
Copy link
Member

Can confirm the issue is no longer reproducible in the latest playground.

@github-actions github-actions bot locked and limited conversation to collaborators Aug 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
Projects
None yet
4 participants