This issue only happens with the "dev" version of the vue.esm-browser file in the dist folder of npm.

Version

3.0.4

Reproduction link

Note* I am using rollup to build the application. This is why I cannot add a reproducible link.

Steps to reproduce

In my main.ts file

import { createApp } from 'vue' import App from '#/app/App.vue' import router from '#/app/router'

const app = createApp(App) app.use(router) app.mount('body')

I add the "router" configuration:

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

import Home from '#/app/Home.vue'

const routes = [{ name: 'Home', path: '/', component: Home, }, ]

const history = createWebHistory()

const router = createRouter({ routes, history, })

export default router

And then get this error:

vue.esm-browser.js:8346 Uncaught TypeError: el.addEventListener is not a function at addEventListener (vue.esm-browser.js:8346) at useHistoryListeners (vue-router.esm-browser.js:476) at createWebHistory (vue-router.esm-browser.js:581) at router.ts:17

When the "router" is removed, the issue does not exist.

What is expected?

That there are no issues.

What is actually happening?

There is an issue.

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

Read https://new-issue.vuejs.org/?repo=vuejs/vue-router-next#why-repro and if you can reproduce it (rollup shouldn't be necessary), open a new issue in vue router next repository

Okay, thank you! For anyone who stumbles upon this, I added to my script tag type='module' and all works now.