Error: Cannot read properties of undefined (reading 'use') in Vue.js router configuration

Question

Description: I am working on a leaderboard web application using Vue.js. After completing my code, I attempted to launch the server on localhost, but encountered an error. The error message I received is as follows:

Uncaught runtime errors:

ERROR
Cannot read properties of undefined (reading 'use')
TypeError: Cannot read properties of undefined (reading 'use')
    at eval (webpack-internal:///./src/router.js:10:45)
    at ./src/router.js (http://localhost:8080/js/app.js:79:1)
    at __webpack_require__ (http://localhost:8080/js/app.js:203:33)
    at fn (http://localhost:8080/js/app.js:436:21)
    at eval (webpack-internal:///./src/main.js:4:65)
    at ./src/main.js (http://localhost:8080/js/app.js:69:1)
    at __webpack_require__ (http://localhost:8080/js/app.js:203:33)
    at http://localhost:8080/js/app.js:1324:109
    at __webpack_require__.O (http://localhost:8080/js/app.js:249:23)
    at http://localhost:8080/js/app.js:1325:53

I tried creating a new project to fix the error, but the problem persists. I also made sure to repeatedly install both Vue and Vue Router, but that didn't resolve the issue. I am seeking assistance in identifying and resolving the problem.

import Vue from "vue";
import VueRouter from "vue-router";

import Scoreboard from "./components/ScoreboardTable.vue";
import Submissions from "./components/SubmissionDetails.vue";

Vue.use(VueRouter);

const routes = [
  { path: "/scoreboard", component: Scoreboard },
  { path: "/submissions/:problemId", component: Submissions },
];

const router = new VueRouter({
  routes,
});

export default router;

The objective of this project is to develop a single-page app for viewing a competition's scoreboard. The app should have two pages: the Scoreboard page and the Submissions page, each serving a specific purpose.

I appreciate any assistance in locating and fixing the issue. Thank you in advance!

Which Vue version are you using? This is Vue 2 setup, if you actually use Vue 3, you'd probably get an error like the one you are seeing — Moritz Ringler
– Moritz Ringler, Commented May 13, 2023 at 13:36
├─┬ @vue/[email protected] │ └─┬ @vue/[email protected] │ ├─┬ @vue/[email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └─┬ @vue/[email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped └─┬ [email protected] └── [email protected] deduped — CyberBreach
– CyberBreach, Commented May 14, 2023 at 7:32

Moritz Ringler · Accepted Answer · 2023-05-14 09:09:15Z

3

You are using Vue 3, but instantiate vue-router as you would have in Vue 2 (Vue.use(...))

With Vue 3, you create the router with createRouter() and add it to the app instance (instead of a global Vue object):

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

const routes = [...]

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

const app = Vue.createApp({})
app.use(router)

The documentation has more details.

answered May 14, 2023 at 9:09

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hadf Over a year ago

See also stackoverflow.com/questions/64653373/…

Collectives™ on Stack Overflow

Error: Cannot read properties of undefined (reading 'use') in Vue.js router configuration

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related