안녕하세요 강의대로 진행하고 공부하고 있는데 다음과 같은 오류가 발생합니다. 어떻게 조치하면 좋을까요?

Question

오류 내용입니다. export 'default' (imported as 'VueRouter') was not found in 'vue-router' (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)       package.json입니다. { "name": "frontend", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.8.3", "vue": "^3.2.36", "vue-router": "^4.0.13" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ] }   감사합니다.

캡틴판교 · Answer

안녕하세요, 제가 확인이 늦었네요. 첨부해 주신 로그를 보기가 어려운데 코드 포맷팅해서 다시 올려주실 수 있으실까요? 그리고 작성하신 로직도 같이 첨부해 주세요 :)

함성호 · Answer

버전을 오히려 낮춰서 해보고 있는데 터미널 창에선 오류가 발생하지 않지만, 개발자도구에서 확인할 때 다음과 같은 오류가 발생합니다. 간단한 라우팅 부분인데도 시간이 너무 오래걸려서... 힘듭니다 ㅠ 확인해주세요 Vue warn]: Error in beforeCreate hook: "TypeError: this._router.init is not a function" (found in ) warn @ vue.runtime.esm.js:4605 logError @ vue.runtime.esm.js:3045 globalHandleError @ vue.runtime.esm.js:3041 handleError @ vue.runtime.esm.js:3008 invokeWithErrorHandling @ vue.runtime.esm.js:3024 callHook$1 @ vue.runtime.esm.js:4031 Vue._init @ vue.runtime.esm.js:5689 Vue @ vue.runtime.esm.js:5762 eval @ main.js:9 ./src/main.js @ app.js:276 __webpack_require__ @ app.js:348 (anonymous) @ app.js:1470 __webpack_require__.O @ app.js:394 (anonymous) @ app.js:1471 (anonymous) @ app.js:1473 vue.runtime.esm.js:3049 TypeError: this._router.init is not a function at Vue.beforeCreate (vue-router.esm.js:1298:1) at invokeWithErrorHandling (vue.runtime.esm.js:3017:1) at callHook$1 (vue.runtime.esm.js:4031:1) at Vue._init (vue.runtime.esm.js:5689:1) at new Vue (vue.runtime.esm.js:5762:1) at eval (main.js:9:1) at ./src/main.js (app.js:276:1) at __webpack_require__ (app.js:348:33) at app.js:1470:109 at __webpack_require__.O (app.js:394:23) logError @ vue.runtime.esm.js:3049 globalHandleError @ vue.runtime.esm.js:3041 handleError @ vue.runtime.esm.js:3008 invokeWithErrorHandling @ vue.runtime.esm.js:3024 callHook$1 @ vue.runtime.esm.js:4031 Vue._init @ vue.runtime.esm.js:5689 Vue @ vue.runtime.esm.js:5762 eval @ main.js:9 ./src/main.js @ app.js:276 __webpack_require__ @ app.js:348 (anonymous) @ app.js:1470 __webpack_require__.O @ app.js:394 (anonymous) @ app.js:1471 (anonymous) @ app.js:1473 vue.runtime.esm.js:4605 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'matched')" found in ---> at src/App.vue warn @ vue.runtime.esm.js:4605 logError @ vue.runtime.esm.js:3045 globalHandleError @ vue.runtime.esm.js:3041 handleError @ vue.runtime.esm.js:3008 Vue._render @ vue.runtime.esm.js:2687 updateComponent @ vue.runtime.esm.js:3875 Watcher.get @ vue.runtime.esm.js:3446 Watcher @ vue.runtime.esm.js:3436 mountComponent @ vue.runtime.esm.js:3892 Vue.$mount @ vue.runtime.esm.js:8772 init @ vue.runtime.esm.js:4407 createComponent @ vue.runtime.esm.js:6567 createElm @ vue.runtime.esm.js:6521 patch @ vue.runtime.esm.js:7109 Vue._update @ vue.runtime.esm.js:3765 updateComponent @ vue.runtime.esm.js:3875 Watcher.get @ vue.runtime.esm.js:3446 Watcher @ vue.runtime.esm.js:3436 mountComponent @ vue.runtime.esm.js:3892 Vue.$mount @ vue.runtime.esm.js:8772 eval @ main.js:12 ./src/main.js @ app.js:276 __webpack_require__ @ app.js:348 (anonymous) @ app.js:1470 __webpack_require__.O @ app.js:394 (anonymous) @ app.js:1471 (anonymous) @ app.js:1473 vue.runtime.esm.js:3049 TypeError: Cannot read properties of undefined (reading 'matched') at render (vue-router.esm.js:354:1) at createFunctionalComponent (vue.runtime.esm.js:4357:1) at createComponent (vue.runtime.esm.js:4497:1) at _createElement (vue.runtime.esm.js:2916:1) at createElement$1 (vue.runtime.esm.js:2866:1) at vm._c (vue.runtime.esm.js:2635:1) at Proxy.render (App.vue:11:1) at Vue._render (vue.runtime.esm.js:2684:1) at VueComponent.updateComponent (vue.runtime.esm.js:3875:1) at Watcher.get (vue.runtime.esm.js:3446:1) logError @ vue.runtime.esm.js:3049 globalHandleError @ vue.runtime.esm.js:3041 handleError @ vue.runtime.esm.js:3008 Vue._render @ vue.runtime.esm.js:2687 updateComponent @ vue.runtime.esm.js:3875 Watcher.get @ vue.runtime.esm.js:3446 Watcher @ vue.runtime.esm.js:3436 mountComponent @ vue.runtime.esm.js:3892 Vue.$mount @ vue.runtime.esm.js:8772 init @ vue.runtime.esm.js:4407 createComponent @ vue.runtime.esm.js:6567 createElm @ vue.runtime.esm.js:6521 patch @ vue.runtime.esm.js:7109 Vue._update @ vue.runtime.esm.js:3765 updateComponent @ vue.runtime.esm.js:3875 Watcher.get @ vue.runtime.esm.js:3446 Watcher @ vue.runtime.esm.js:3436 mountComponent @ vue.runtime.esm.js:3892 Vue.$mount @ vue.runtime.esm.js:8772 eval @ main.js:12 ./src/main.js @ app.js:276 __webpack_require__ @ app.js:348 (anonymous) @ app.js:1470 __webpack_require__.O @ app.js:394 (anonymous) @ app.js:1471 (anonymous) @ app.js:1473 [package.json]{ "name": "front", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.8.3", "vue": "^2.6.14", "vue-router": "^3.5.3", "vuex": "^3.6.2" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", "vue-template-compiler": "^2.6.14" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴이에요. 오류 내용을 보면 &lsquo;VueRouter&rsquo;에서 &lsquo;default&rsquo;를 불러올 수 없다는 오류입니다. 보통 이런 경우는 여러 가지 원인으로 발생할 수 있는데, 현재 상황에서는 vue-router의 버전이 맞지 않아서 생기는 문제일 수 있습니다. 현재 사용하고 있는 버전은 &ldquo;^4.0.13&rdquo; 이며, 이 버전에 따른 VueRouter 사용 방법을 확인하셔서 사용해보시기 바랍니다. 만약 이게 원인이 아니라면 다른 원인일 수도 있으니 해당 코드를 더 자세히 살펴보시기 바랍니다. 감사합니다.