🚀   새로운 블로그로 이전했습니다.

(ESLint) Parsing error: The keyword 'import' is reserved

2022.12.27
2분

Table of contents


vscode에서 개발 중 Parsing error: The keyword 'import' is reserved를 마주칠 때가 있다.
typescript 기반으로 개발을 하는데 javascript으로 된 설정 파일에서 에러를 뱉는다.


원인

말그대로 eslint의 parser가 import 구문을 해석할 수 없기 때문에 에러가 발생한다.
ESLint는 기본적으로 Espree를 사용하고 이는 commonjs 기반으로 구문을 해석하기에 에러가 발생된다.


해결법

  1. commonjs가 아닌 module 기반으로 구문을 해석한다.
.eslintrc.cjs
module.exports = {
  //...
  overrides: [
    {
      files: ['**/*.ts?(x)'],
      parser: '@typescript-eslint/parser',
      //...
    },
    {
        files: ['**/*.js?(x)'],
        parserOptions: {
            sourceType: 'module',
            ecmaVersion: 2015,
        },
    },
  ],
};
  1. 다른 parser를 통해서 구문을 해석한다.

가장 대표적인 @babel/parser를 사용하면 된다.
참고로 babel-eslint는 deprecated 되었다.

yarn add -D @babel/parser @babel/preset-env
.eslintrc.cjs
module.exports = {
  parser: '@babel/eslint-parser',
  parserOptions: {
    requireConfigFile: false,
    babelOptions: {
      babelrc: false,
      configFile: false,
      presets: ["@babel/preset-env"],
    },
  },
};

사실 parser의 default sourceType module여서 에러가 사라지는 것이다...