Vue version

3.3.4 and 3.4.15

Link to minimal reproduction

For reproduction please see the provided Stackblitz project

Steps to reproduce

Steps to reproduce the bug Here's a stackblitz project reproducing the issue: Vue + Vue Router Error Reproduction

How to see the reproduction First four steps show that transitions are working for Route A and Route B, even when going to Route C.

Navigate to "Works A" Navigate to "Works B" Navigate to "Works A" Navigate to "Crashes C" Navigate to "Works A" and see the the router views are not rendered anymore.

Specifically "Crashes E" and "Works F" are a real mystery since the only difference is the missing commented out RouterView in the template section in "Works F".

What is expected?

Vue router should silently ignore when there are no children defined in the router config yet (iterative approach of software development). Even if it doesn't ignore them, navigation away to a previously working route should be possible without having to reload the application in the browser tab.

The Vue App should not crash just because there's a commented out RouterView in the template code ("Crashes E" vs "Works F").

What is actually happening?

The top level router view in App.vue has a Transition in its slot to wrap all top level router target view components.

The first three top level targets defined in their template a child and have Vue Components for those child routes. But the third "Crashes C" has no children defined yet and D, E, F also not. When navigating to that top level target "Crashes C" and then to some other route, view router crashes. I've seen occationally some error about transitions in the browser console, but not always.

"Works D" has no RouterView in its template. "Crashes E" is essentially "Crashes C" but the import and RouterView in the template is commented out. "Works F" is essentially "Crashes E" but the commented out RouterView in the template is removed from the code (Yes, you are reading that right!).

Side-effect: When staying in a crashed Route reloading the browser tab to restart the app will let a user stick in that route since navigating away from it will crash the Vue router again.

System Info

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 67.22 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.1 - ~/.nvm/versions/node/v20.5.1/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.8.0 - ~/.nvm/versions/node/v20.5.1/bin/npm
    pnpm: 7.29.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.85
    Safari: 17.2.1
  npmPackages:
    vue: ^3.4.15 => 3.4.15

Any additional comments?

This is not related to https://github.com/vuejs/core/issues/7966 since it happens immediately. I don't have to rapidly click or anything like that. It happens with Vue 3.3.4 and 3.4.15. It happens with node 18 (Stackblitz) and 20 (local on my dev box).

The issue was initially reported at vue-router: https://github.com/vuejs/router/issues/2121 But when I discovered variants "Crash E" vs. "Works F" (click the routes in the StackBlitz and compare the vue files), I saw that the pure presence of <!--<RouterView></RouterView>--> in the template code triggers the crash. There is something wrong with the template compiler here as well.