Description: I have been working on a leaderboard web application using Vue.js. When I tried to launch the server on localhost after finishing my code, I 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 attempted creating a new project to troubleshoot the error, but unfortunately, the problem persists. Even after reinstalling both Vue and Vue Router multiple times, the issue remains unresolved. I am reaching out for assistance in identifying and resolving the underlying 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 main goal of this project is to create a single-page app that displays a competition's scoreboard. The app should consist of two pages - the Scoreboard page and the Submissions page, each serving its own specific purpose.
Your help in pinpointing and rectifying this issue is greatly appreciated. Thank you in advance!