[Vue3] Parsing error: 에러 해결

💻 에러 메시지

Parsing error: No Babel config file detected for ~경로~. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.eslint

또는

Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context.

✔ 해결 방법

각 파일들은 프로젝트 폴더 아래에 생성

1. babel.config.js 생성

module.exports = {
  presets: ['@babel/preset-env']
};

2. jsconfig.json 생성

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

3. vue.config.js 생성

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: './',
  configureWebpack: {
    devtool: 'source-map'
  },
  transpileDependencies: true
})

4. .eslintrc.js 생성

module.exports = {
    root: true,
    env: {
      node: true,
    },
    extends: [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
    ],
    parserOptions: {
      parser: "@babel/eslint-parser",
      requireConfigFile: false,
    },
  }

5. .eslintrc.json 생성

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "overrides": [
    ],
    "parser": "@babel/eslint-parser,
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    }
}

저장 후 npm run serve로 서버를 띄우면, 파일에 빨간색으로 에러 표시는 되지만 화면 실행은 된다. 완벽하게 해결하는 방법을 찾으면 수정 예정