Question

Technologies:

javascript

vue.js

Tolerim

15 days ago

In Vue.js router configuration, an error is occurring that states "cannot read properties of undefined (reading 'use')"

Description: I am working on a leaderboard web application using Vue.js. However, when attempting to launch the server on localhost, I received an error message that stated:

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 webpackrequire_ (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 webpackrequire_ (http://localhost:8080/js/app.js:203:33)
    at http://localhost:8080/js/app.js:1324:109
    at webpackrequire_.O (http://localhost:8080/js/app.js:249:23)
    at http://localhost:8080/js/app.js:1325:53

I have attempted to fix the error by creating a new project, reinstalling both Vue and Vue Router repeatedly, and verifying that the code is correct. Despite my efforts, the error persists. Therefore, I require assistance in resolving the issue.

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;

I intend to develop a single-page app that displays the scoreboard of a competition. There will be two pages: the Scoreboard page and the Submissions page, each with a specific role.

Kindly assist me in pinpointing and rectifying the issue. Thank you for your help in advance!

Answers(1)

Accepted Answer

The error message suggests that there is an issue with the router configuration in the src/router.js file. Specifically, the error is being caused by attempting to read the use property of an undefined object. Upon inspecting the code provided, it appears that the VueRouter library is not being imported correctly. The following line is attempting to import VueRouter:

import VueRouter from "vue-router";

However, the error message suggests that VueRouter is undefined, which indicates that the import was unsuccessful. This issue can be resolved by installing and importing vue-router correctly. To install vue-router using npm, you can run the following command in your terminal:

Then, update the import statement in your src/router.js file to the following:

import { createRouter, createWebHistory } from "vue-router";

This import statement is using the createRouter and createWebHistory functions from vue-router. Replace the router initialization code with the following:

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

export default router;

This should resolve the issue and allow the router to function properly.