React

"Must use import to load ES Module..." #1346 @babel/eslint-parser 에러

기존에는 ESLint가 babel을 로드하지 못하는 에러를 babel-eslint를 사용해서 해결했었는데
여기에서는 위와 같은 Parsing error가 나와서 찾아보니 최신버전은 @babel/eslint-parser라고 해서 설치한다음에도 해결되지 않아서 plugins에 @babel을 추가해주니 에러가 사라졌다.
{ "parserOptions": { "ecmaVersion": "latest" }, "env": { "browser": true, "node": true, "commonjs": true, "es2021": true }, "globals": { "_": true }, "plugins": ["import", "html", "@babel"], "extends": ["airbnb-base", "prettier"], // 추가 "parser": "@babel/eslint-parser", "rules": { // "off" or 0 - turn the rule off // "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code) // "error" or 2 - turn the rule on as an error (exit code is 1 when triggered) // "no-var": "off", "no-console": "warn", "no-plusplus": "off", "no-shadow": "off", "vars-on-top": "off", "no-underscore-dangle": "off", // var _foo; "comma-dangle": "off", "func-names": "off", // setTimeout(function () {}, 0); "prefer-template": "off", "no-nested-ternary": "off", "max-classes-per-file": "off", "consistent-return": "off", "no-restricted-syntax": ["off", "ForOfStatement"], // disallow specified syntax(ex. WithStatement) "prefer-arrow-callback": "error", // Require using arrow functions for callbacks "require-await": "error", "arrow-parens": ["error", "as-needed"], // a => {} "no-param-reassign": ["error", { "props": false }], "no-unused-expressions": [ "error", { "allowTernary": true, // a || b "allowShortCircuit": true, // a ? b : 0 "allowTaggedTemplates": true } ], "import/no-extraneous-dependencies": ["error", { "devDependencies": true }], "max-len": [ "error", { "code": 120, "ignoreComments": true, "ignoreStrings": true, "ignoreTemplateLiterals": true } ] // prettier의 printWidth 옵션 대신 사용 } }
JavaScript
복사