인프런 커뮤니티 질문&답변

jung kyung-suk

작성한 질문수

Vue.js + TypeScript 완벽 가이드

프로젝트 구성 및 실행 결과 확인

nom run serve를 하면 오류가 납니다.

작성

660

vue-advancded의 vue-news에 있는 파일을 새로 만든 news의 디렉토리로 옮기고
npm run serve를 실행하면
아래처럼 routes/index.js와 store/index.js를 찾을 수 없다는 오류가 납니다.
모두 파일은 위치해 있지만 이렇게 됩니다.
어떻게 해결해야 하는지 좀 알려 주세요.

webpack compiled with 1 error
ERROR in src/main.ts:3:20
TS7016: Could not find a declaration file for module './routes/index.js'. '/Users/jungkyungsuk/Workspaces/inflearn/learn-vue-typescript/vue-news/src/routes/index.js' implicitly has an 'any' type.
    1 | import Vue from "vue";
    2 | import App from "./App.vue";
  > 3 | import router from "./routes/index.js";
      |                    ^^^^^^^^^^^^^^^^^^^
    4 | import store from "./store/index.js";
    5 |
    6 | Vue.config.productionTip = false;

ERROR in src/main.ts:4:19
TS7016: Could not find a declaration file for module './store/index.js'. '/Users/jungkyungsuk/Workspaces/inflearn/learn-vue-typescript/vue-news/src/store/index.js' implicitly has an 'any' type.
    2 | import App from "./App.vue";
    3 | import router from "./routes/index.js";
  > 4 | import store from "./store/index.js";
      |                   ^^^^^^^^^^^^^^^^^^
    5 |
    6 | Vue.config.productionTip = false;
    7 |

vuejs typescript

답변 1

캡틴판교

지식공유자

안녕하세요 경석님, package.json 파일의 vue 관련 라이브러리 버전 적어주시겠어요? router와 vuex 버전을 아래 글에 나온 것과 같이 맞춰주셔야 합니다. 그리고 타입 선언 파일을 찾을 수 없다고 나오는 것은 뷰 설정 파일에서 overlay 옵션을 꺼주시면 됩니다.

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
client: {
overlay: false,
},
},
});

https://joshua1988.github.io/web-development/vuejs/vue3-as-default/

jung kyung-suk

질문자

{
  "name": "vue-news",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },  
  "dependencies": {
    "axios": "^0.26.1",
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.3",
    "vuex": "^3.6.2"
  },  
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "prettier": "^2.4.1",
    "typescript": "~4.5.5",
    "vue-template-compiler": "^2.6.14"
  }

버전알려주신 페이지 처럼 맞췄는데도, 아래와 같이 나오고 있습니다. 제가 에러 부분을 빼먹은게 있어서 더
넣었습니다.

webpack compiled with 1 error
ERROR in src/main.ts:3:20
TS7016: Could not find a declaration file for module './routes/index.js'. '/Users/jungkyungsuk/Workspaces/inflearn/learn-vue-typescript/vue-news/src/routes/index.js' implicitly has an 'any' type.
    1 | import Vue from "vue";
    2 | import App from "./App.vue";
  > 3 | import router from "./routes/index.js";
      |                    ^^^^^^^^^^^^^^^^^^^
    4 | import store from "./store/index.js";
    5 |
    6 | Vue.config.productionTip = false;

ERROR in src/main.ts:4:19
TS7016: Could not find a declaration file for module './store/index.js'. '/Users/jungkyungsuk/Workspaces/inflearn/learn-vue-typescript/vue-news/src/store/index.js' implicitly has an 'any' type.
    2 | import App from "./App.vue";
    3 | import router from "./routes/index.js";
  > 4 | import store from "./store/index.js";
      |                   ^^^^^^^^^^^^^^^^^^
    5 |
    6 | Vue.config.productionTip = false;
    7 |

ERROR in src/main.ts:9:3
TS2769: No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | undefined): CombinedVueInstance<Vue, object, object, object, Record<...>>', gave the following error.
    Argument of type '{ router: any; store: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
      Object literal may only specify known properties, and 'router' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | undefined): CombinedVueInstance<Vue, object, object, object, Record<...>>', gave the following error.
    Argument of type '{ router: any; store: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
      Object literal may only specify known properties, and 'router' does not exist in type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
  Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ router: any; store: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps>'.
      Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps>'.
     7 |
     8 | new Vue({
  >  9 |   router,
       |   ^^^^^^
    10 |   store,
    11 |   render: (h) => h(App),
    12 | }).$mount("#app");

Yong-Hae Lee

저도 같은 문제가 있습니다. (사용하는 버전을 동일해서 같은 에러가 발생하는 것 같습니다.)

의견: 에러가 브라우저에 에러 화면이 보이는 것을 감추는 방법을 알려주시는 것도 방법일 것 같아요. 화면에 에러가 보이니까 진행할 수 없다고 생각 할 수 있으니까요.

@jung kyung-suk님, 에러 오버레이를 무시하시고 다음 챕터로 넘어가 주세요. tsconfig를 통해서 에러를 해결하는 방법을 알려줍니다.

jung kyung-suk

질문자

안녕하세요.

오버레이는 무시하더라도 router/index.js 와 store/index.js 문제로 serve 실행자체가 안되요

Yong-Hae Lee

저 같은 경우는 브라우저 화면 우측 상단에 "X"표시가 있어 "X"를 클릭하여 닫았었습니다. (이 것을 무시한다고 표현했었습니다.)

바로 다음 강의에서 router/index.js와 store/index.js와 관련된 error를 없애는 방법이 나오는데, 요약하면 tsconfig.json에서 "compilerOptions"아래에 아래의 3개 option을 넣어보세요.

    "strict": false,
  "noImplicitAny": true,
    "allowJs": true,

jung kyung-suk

질문자

네 감사합니다.

캡틴판교

지식공유자

안녕하세요, 현재 상황에서는 타입 선언 파일을 찾을 수 없다는 에러가 나오는게 맞습니다. 제 이전 답변이 잘못됐네요. 일단 용해님 말씀처럼 뷰 설정 파일에 overlay 옵션을 꺼주시고 실행하시면 문제 없이 화면 동작하는거 보실 수 있을 거예요.

뷰 설정 파일에 아래와 같이 오버레이 옵션 끄는거 넣으시면 됩니다.

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
client: {
overlay: false,
},
},
});

jung kyung-suk

작성한 질문수

전체 Q&A

질문하기