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

안녕하세요 다름이 아니라 .eslintrc를 적용하는 와중에 다른 js파일들에서 에러가 생겨서 문의드립니다.

 

vscode 실행 시, js 파일 import구문에 빨간 밑줄이 쳐지면서

 

Parsing error: Must use import to load ES Module: /Users/seolranlee/study/react/react-nodebird/front/node_modules/eslint-scope/lib/definition.js require() of ES modules is not supported. require() of /Users/seolranlee/study/react/react-nodebird/front/node_modules/eslint-scope/lib/definition.js from /Users/seolranlee/study/react/react-nodebird/front/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/seolranlee/study/react/react-nodebird/front/node_modules/eslint-scope/package.json.eslint

 

상기와 같은 에러 설명이 뜨는데요..ㅠㅠ 스택 오버 플로우에 검색하니 비슷한 현상이 있어서 따라 해결해 보았는데도 문제현상이 해결되지않아서 직접 문의드려요.

 

https://stackoverflow.com/questions/69554485/eslint-error-must-use-import-to-load-es-module

 

현재 프로젝트 내 .eslintrc 내용도 함께 전달드립니다.

 

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "airbnb"
  ],
  "plugins": [
    "import",
    "react-hooks"
  ],
  "rules": {
    "jsx-a11y/label-has-associated-control": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "no-console": "off",
    "no-underscore-dangle": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-filename-extension": "off",
    "react/jsx-one-expression-per-line": "off",
    "object-curly-newline": "off",
    "linebreak-style": "off"
    // "no-param-reassign": "off"
  }
}

혹시 몰라 package.json 내용도 전달드려요.

 

{
  "name": "react-nodebird-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next -p 3060",
    "build": "next build"
  },
  "author": "seolranlee",
  "license": "ISC",
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "antd": "^4.16.13",
    "axios": "^0.24.0",
    "faker": "^5.5.3",
    "immer": "^9.0.6",
    "next": "^9.5.5",
    "next-redux-wrapper": "^7.0.5",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-slick": "^0.28.1",
    "redux": "^4.1.2",
    "redux-devtools-extension": "^2.13.9",
    "redux-saga": "^1.1.3",
    "shortid": "^2.2.16",
    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^8.1.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.2.0"
  }
}