<router-link> to a component with an async setup() doesn't work #491
Description
Version
4.0.0-beta.11
Reproduction link
https://github.com/randomisedrandomness/broken-router-project
Steps to reproduce
My steps after creating new project:
- Create a new vue 3 project with router
- Create 2 new views (components) one with normal setup() method, the other with async setup() method.
- Add new routes to use these views, and add router-link components to be able to click on them.
- Put router-view inside a Suspense tag.
To reproduce after downloading repository:
5. npm install
6. npm run serve
7. Clicking on router-links of synchronous views works fine. Clicking on the router-link to a component with async setup() produces an error
warning:
"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
error:
"Uncaught (in promise) TypeError: node is null
parentNode runtime-dom.esm-bundler.js:30
componentEffect runtime-core.esm-bundler.js:4564
reactiveEffect reactivity.esm-bundler.js:42
callWithErrorHandling runtime-core.esm-bundler.js:154
flushJobs runtime-core.esm-bundler.js:364
promise callbackqueueFlush runtime-core.esm-bundler.js:264
queueJob runtime-core.esm-bundler.js:258
run reactivity.esm-bundler.js:182
trigger reactivity.esm-bundler.js:188
scheduler reactivity.esm-bundler.js:811
run reactivity.esm-bundler.js:182
trigger reactivity.esm-bundler.js:188
scheduler reactivity.esm-bundler.js:811
run reactivity.esm-bundler.js:182
trigger reactivity.esm-bundler.js:188
scheduler reactivity.esm-bundler.js:811
run reactivity.esm-bundler.js:182
trigger reactivity.esm-bundler.js:188
set value reactivity.esm-bundler.js:721
finalizeNavigation vue-router.esm-browser.js:2527
pushWithRedirect vue-router.esm-browser.js:2400
promise callbackpushWithRedirect vue-router.esm-browser.js:2371
push vue-router.esm-browser.js:2311
navigate vue-router.esm-browser.js:1941
callWithErrorHandling runtime-core.esm-bundler.js:154
callWithAsyncErrorHandling runtime-core.esm-bundler.js:163
invoker runtime-dom.esm-bundler.js:292
addEventListener runtime-dom.esm-bundler.js:242
patchEvent runtime-dom.esm-bundler.js:260
patchProp runtime-dom.esm-bundler.js:328
mountElement runtime-core.esm-bundler.js:4112
processElement runtime-core.esm-bundler.js:4075
patch runtime-core.esm-bundler.js:3988
componentEffect runtime-core.esm-bundler.js:4493
reactiveEffect reactivity.esm-bundler.js:42
effect reactivity.esm-bundler.js:17
setupRenderEffect runtime-core.esm-bundler.js:4458
mountComponent runtime-core.esm-bundler.js:4416
processComponent runtime-core.esm-bundler.js:4376
patch runtime-core.esm-bundler.js:3991
mountChildren runtime-core.esm-bundler.js:4180
mountElement runtime-core.esm-bundler.js:4103
processElement runtime-core.esm-bundler.js:4075
patch runtime-core.esm-bundler.js:3988
mountChildren runtime-core.esm-bundler.js:4180
processFragment runtime-core.esm-bundler.js:4339
patch runtime-core.esm-bundler.js:3984
componentEffect runtime-core.esm-bundler.js:4493
reactiveEffect reactivity.esm-bundler.js:42
effect reactivity.esm-bundler.js:17
setupRenderEffect runtime-core.esm-bundler.js:4458
mountComponent runtime-core.esm-bundler.js:4416
processComponent runtime-core.esm-bundler.js:4376
patch runtime-core.esm-bundler.js:3991
render runtime-core.esm-bundler.js:5108
mount runtime-core.esm-bundler.js:3429
mount runtime-dom.esm-bundler.js:1206
main.js:5
js app.js:1265
webpack_require app.js:854
fn app.js:151
1 app.js:1398
webpack_require app.js:854
checkDeferredModules app.js:46
app.js:994
app.js:997"
"
What is expected?
Should just work right? It worked a few days ago. It stopped after i ran npm update in my project.
What is actually happening?
Clicking on a router-link that would open a component with an async setup() method (coposition API) does'nt work and throws an error in console.
It worked fine 3 days ago, it stopped after i used npm update in my old project (i don't know what version it had before).