Subscribe on changes!

vue render error when there is comment node and keep-alive and dynamic component

avatar
Sep 16th 2020

Version

3.0.0-rc.11

Reproduction link

https://codesandbox.io/s/github/lovetingyuan/vue3-comment-render-bug

Steps to reproduce

github: https://github.com/lovetingyuan/vue3-comment-render-bug 1 use vite to serve the website 2 click button: show list 3 click first item

What is expected?

There should no errors.

What is actually happening?

vue.js:1166 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <KeepAlive> 
  at <App>
warn @ vue.js:1166
logError @ vue.js:1339
handleError @ vue.js:1331
callWithErrorHandling @ vue.js:1285
flushJobs @ vue.js:1487
flushJobs @ vue.js:1500
Promise.then (async)
queueFlush @ vue.js:1387
queueCb @ vue.js:1409
queuePostFlushCb @ vue.js:1415
queueEffectWithSuspense @ vue.js:2458
scheduler @ vue.js:6425
run @ vue.js:479
trigger @ vue.js:485
set @ vue.js:578
showContent @ C:\Users\vue3-comment-render-bug\components\ListComp.vue:22
_createBlock.onClick._cache.<computed>._cache.<computed> @ C:\Users\vue3-comment-render-bug\components\ListComp.vue:3
callWithErrorHandling @ vue.js:1282
callWithAsyncErrorHandling @ vue.js:1291
invoker @ vue.js:8003
vue.js:7722 Uncaught (in promise) TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.
    at insert (vue.js:7722)
    at move (vue.js:6014)
    at move (vue.js:5976)
    at move (vue.js:5962)
    at Object.sharedContext.deactivate (vue.js:4034)
    at unmount (vue.js:6024)
    at patch (vue.js:5070)
    at componentEffect (vue.js:5665)
    at Object.reactiveEffect [as update] (vue.js:343)
    at updateComponent (vue.js:5549)
avatar
Sep 16th 2020

I am not sure about the reason. But if I remove keep-alive or remove the comment node in ListComp.vue, there is no render error.

avatar
Sep 19th 2020

Excuse me, but I found the bug still occurs when built in production mode.

Run yarn build and use dist as http server root dir. The issue mentioned above is still there.

index.5a30f16e.js:1 TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.
    at insert (index.5a30f16e.js:1)
    at Z (index.5a30f16e.js:1)
    at Z (index.5a30f16e.js:1)
    at Z (index.5a30f16e.js:1)
    at Object.i.deactivate (index.5a30f16e.js:1)
    at Q (index.5a30f16e.js:1)
    at w (index.5a30f16e.js:1)
    at index.5a30f16e.js:1
    at Object.n [as update] (index.5a30f16e.js:1)
    at L (index.5a30f16e.js:1)
{
  "dependencies": {
    "vue": "3.0.0"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "3.0.0",
    "vite": "1.0.0-rc.4"
  }
}

@yyx990803 Could you check it? Thanks a lot.

avatar
Sep 22nd 2020

https://github.com/vuejs/vue-next/issues/2134#issuecomment-695332849 caused by use @compiler-core dev bundler compiler template with production. https://github.com/vitejs/vite/pull/732 is already fixed this.

avatar
Sep 22nd 2020

Yep, I use cross-env NODE_ENV=production vite build, and it works well. So it is not a vue's bug, right? If so, please feel free to close this issue. Thanks!