vue2 -> typescript 전환 시 에러 - outDir, paths, vetur, eslint

Maliethy·2023년 1월 9일
0

typescript

목록 보기
2/3

issue

0. Cannot write file '/Users/me/test/example/babel.config.js' because it would overwrite input file.ts

    "compilerOptions": {
      "outDir": "./dist", // 이 부분 추가

https://velog.io/@the_boxer/%EC%97%90%EB%9F%AC-Cannot-write-file-...-because-it-would-overwrite-input-file

1. Cannot find module '@/utils' or its corresponding type declarations.Vetur(2307)

  "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      }
    }

https://github.com/vuejs/vetur/issues/2875
https://vuejs.github.io/vetur/guide/FAQ.html#vetur-can-t-recognize-components-imported-using-webpack-s-alias

// src/vue-shims.d.ts

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

2. Parsing error: Imports within a declare module body must always be import type or import typeof

https://stackoverflow.com/questions/63238879/eslint-only-declares-and-type-imports-are-allowed-inside-declare-module

// .eslintignore

/**/*.d.ts
// .eslintrc.js

  parserOptions: {
    parser: ['babel-eslint',
      '@typescript-eslint/parser'],
  },

3. Cannot find module '@/components/MapControl/Common/ModalHeader' or its corresponding type declarations.Vetur(2307)

disabled vetur

https://stackoverflow.com/questions/71372991/cannot-find-module-components-helloworld-vue-or-its-corresponding-type-decla

4. Cannot find module '@/components/MapControl/Common/ModalHeader' or its corresponding type declarations.ts(2307)

import ModalHeader from "@/components/MapControl/Common/ModalHeader";
import ModalFooter from "@/components/MapControl/Common/ModalFooter";

import ModalHeader from "@/components/MapControl/Common/ModalHeader.vue";
import ModalFooter from "@/components/MapControl/Common/ModalFooter.vue";

https://stackoverflow.com/questions/54839057/vscode-showing-cannot-find-module-ts-error-for-vue-import-while-compiling-doe

5. Parse errors in imported module '@/constants': Identifier directly after number (78:43)eslintimport/named

parserOptions: 기본적인 코드 분석기 설정

  // parserOptions: {
  //   parser: 'babel-eslint',
  // },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },

rules: {
    'import/extensions': [
      'error',
      'always',
      {
        js: 'never',
        ts: 'never',
        vue: 'ignorePackages', // 이 부분 never -> ignorePackages로 수정
      },
    ],
}
profile
바꿀 수 있는 것에 주목하자

0개의 댓글