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

Suspense内嵌套路由且含有异步组件,异步结束前路由跳转报错 #7828

Closed
gitsheny opened this issue Mar 5, 2023 · 4 comments

Comments

@gitsheny
Copy link

gitsheny commented Mar 5, 2023

Vue version

3.2.47

Link to minimal reproduction

https://github.com/gitsheny/vue-Suspense.git

Steps to reproduce

<Suspense>内含有嵌套路由,且使用了异步组件时。
当页面内的异步未执行结束时路由跳转,会发生错误。

// App.vue
<div>
  <router-link to="/">routerA</router-link>;&nbsp;
  <router-link to="/pageB">routerB</router-link>
</div>

<RouterView v-slot="{ Component }">
  <template v-if="Component">
    <Suspense>
      <component :is="Component" />
    </Suspense>
  </template>
</RouterView>
// router/index.js
...
routes: [{
  path: '/',
  component: Layout,
  children: [...pageA.vue,pageB.vue]
}]

// Layout.vue
<template>
  <router-view />
</template>
// pageA.vue ,pageB.vue
<script setup>
await new Promise((resolve) => {
  setTimeout(() => resolve(), 5000)
})
</script>

What is expected?

跳转正常

What is actually happening?

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at parentNode (runtime-dom.esm-bundler.js:35:30)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5731:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
    at instance.update (runtime-core.esm-bundler.js:5763:56)
    at updateComponent (runtime-core.esm-bundler.js:5588:26)
    at processComponent (runtime-core.esm-bundler.js:5521:13)
    at patch (runtime-core.esm-bundler.js:5119:21)
    at patchSuspense (runtime-core.esm-bundler.js:1313:13)
    at Object.process (runtime-core.esm-bundler.js:1204:13)
    at patch (runtime-core.esm-bundler.js:5125:26)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 1.62 GB / 7.92 GB
  Binaries:
    Node: 16.15.1 - D:\nodejs\node.EXE
    Yarn: 1.22.19 - D:\nodejs\node_global\node_modules\yarn\bin\yarn.CMD
    npm: 8.11.0 - D:\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.63)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vue: ^3.2.47 => 3.2.47

Any additional comments?

No response

@nieyuyao
Copy link
Contributor

I had the same issue.

@wenzheng-yi
Copy link

I had the same issue with nuxt@latest

@edison1105
Copy link
Member

duplicate of #6095

@edison1105
Copy link
Member

fixed via #7290

@edison1105 edison1105 closed this as not planned Won't fix, can't repro, duplicate, stale Jan 4, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Jan 19, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants