Vue 3 Starter cannot find Vue when using Vue Router

[tony19]

Description of Bug

When importing vue-router in the Vue 3 Starter, an error appears:

Error in /turbo_modules/vue-router@4.0.8/dist/vue-router.global.js (3365:7)

Vue is not defined

https://stackblitz.com/edit/stackblitz-bug-vue-router-cannot-find-vue

Steps to Reproduce

1. Open Vue 3 Starter
2. In the Dependencies panel, add vue-router@4.
3. In src/main.js, insert import { createRouter } from 'vue-router'
4. See error in preview window.

Expected Behavior

vue-router is imported without error.

Screenshots/Screencast

Additional Context/Questions

• macOS BigSur
• Chrome 91

[tony19]

For some reason, import 'vue-router' resolves to the UMD build. As a workaround, you have to explicitly pull in the ESM bundle:

import { createRouter, createWebHistory } from 'vue-router' // ❌

import { createRouter, createWebHistory } from 'vue-router/dist/vue-router.esm-bundler' // ✅

fixed StackBlitz demo

[liamdebeasi]

I am also running into this issue. Unfortunately, the workaround posted in #1510 (comment) does not work for me because I am trying to use a 3rd party library that depends on vue-router.

When using @ionic/vue, I get the error even if I explicitly pull in the ESM bundle.

StackBlitz demo: https://stackblitz.com/edit/vue-r9waxc

As suggested in #1636 (comment), using Ionic Vue with StackBlitz + Vite instead does not reproduce the issue.