I've been working on setting up Vue Router (Vue 3 + Vue Router 4) and I'm facing some challenges with the following error messages:
[Vue Router warn]: Error with push/replace State TypeError: history[(intermediate value)(intermediate value)(intermediate value)] is not a function
[Vue Router warn]: Unexpected error when starting the router: TypeError: Cannot read properties of null (reading 'back')
Uncaught TypeError: Cannot read properties of null (reading 'back')
Below is my main.ts file:
import { createApp } from "vue";
import App from "./App.vue";
import store, { storeKey } from "./store/index";
// styling
import "./scss/base.scss";
import router from "./router";
createApp(App).use(router).use(store, storeKey).mount("#app");
And this is my router.ts file content:
import {
createRouter,
createWebHashHistory,
Router,
RouteRecordRaw,
} from "vue-router";
import Home from "@/components/Home.vue";
import FetchInfo from "@/components/FetchInfo.vue";
const routes: RouteRecordRaw[] = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/requests",
name: "Requests",
component: FetchInfo,
},
];
const router: Router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;
Any suggestions on how to troubleshoot and resolve the above error?
The versions I am using include:
- "vue": "^3.2.13",
- "vue-router": "^4.0.15",
- "webpack": "^5.72.1",
- "webpack-dev-server": "^4.9.0"