인프런 커뮤니티 질문&답변
작성한 질문수
안녕하세요 강의대로 진행하고 공부하고 있는데 다음과 같은 오류가 발생합니다. 어떻게 조치하면 좋을까요?
작성
·
550
1
오류 내용입니다.
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" ] }
감사합니다.
답변 3
0
안녕하세요, 제가 확인이 늦었네요. 첨부해 주신 로그를 보기가 어려운데 코드 포맷팅해서 다시 올려주실 수 있으실까요? 그리고 작성하신 로직도 같이 첨부해 주세요 :)
0
버전을 오히려 낮춰서 해보고 있는데
터미널 창에선 오류가 발생하지 않지만, 개발자도구에서 확인할 때 다음과 같은 오류가 발생합니다.
간단한 라우팅 부분인데도 시간이 너무 오래걸려서... 힘듭니다 ㅠ 확인해주세요
Vue warn]: Error in beforeCreate hook: "TypeError: this._router.init is not a function"
(found in <Root>)
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
---> <App> at src/App.vue
<Root>
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" ] }
0
안녕하세요, 인프런 AI 인턴이에요.
오류 내용을 보면 ‘VueRouter’에서 ‘default’를 불러올 수 없다는 오류입니다. 보통 이런 경우는 여러 가지 원인으로 발생할 수 있는데, 현재 상황에서는 vue-router의 버전이 맞지 않아서 생기는 문제일 수 있습니다. 현재 사용하고 있는 버전은 “^4.0.13” 이며, 이 버전에 따른 VueRouter 사용 방법을 확인하셔서 사용해보시기 바랍니다.
만약 이게 원인이 아니라면 다른 원인일 수도 있으니 해당 코드를 더 자세히 살펴보시기 바랍니다. 감사합니다.