ESLint - 오류:ES 모듈을 로드하려면 Import를 사용해야 합니다.
현재 React, TypeScript, 스타일 컴포넌트, Webpack 등으로 보일러 플레이트를 설정하고 있는데 ESLint를 실행하려고 하면 다음과 같은 오류가 발생합니다.
오류: ES 모듈을 로드하려면 가져오기를 사용해야 합니다.
에러의 상세한 버전을 다음에 나타냅니다.
/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts
0:0 error Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js
require() of ES modules is not supported.
require() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/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/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json
이 에러는, 사용하고 있는 모든 .js 파일 및 .ts/ .tsx 파일에서 발생합니다.import파일에는 Import가 전혀 없습니다.에러의 내용은 이해하지만, 실제로는 Import만을 사용하거나 Import를 전혀 사용하지 않는 파일도 있는데, 왜 에러가 발생하는지 알 수 없습니다.
여기 제 소포가 있습니다.linter의 사용을 트리거하는 json 파일npm run lint:eslint:quiet:
{
"name": "my-react-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.tsx",
"directories": {
"test": "test"
},
"engines": {
"node": ">=14.0.0"
},
"type": "module",
"scripts": {
"build": "webpack --config webpack.prod.js",
"dev": "webpack serve --config webpack.dev.js",
"lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet",
"lint:css": "stylelint './src/**/*.{js,ts,tsx}'",
"lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet",
"lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern",
"lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet --fix",
"test": "cross-env NODE_ENV=test jest --coverage",
"test:watch": "cross-env NODE_ENV=test jest --watchAll",
"typecheck": "tsc --noEmit",
"precommit": "npm run lint"
},
"lint-staged": {
"*.{ts,tsx,js,jsx}": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.{md,json}": [
"prettier --write",
"git add --force"
]
},
"husky": {
"hooks": {
"pre-commit": "npx lint-staged && npm run typecheck"
}
},
"resolutions": {
"styled-components": "^5"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.4",
"@babel/plugin-proposal-class-properties": "^7.5.0",
"@babel/preset-env": "^7.5.4",
"@babel/preset-react": "^7.0.0",
"@types/history": "^4.7.6",
"@types/react": "^17.0.29",
"@types/react-dom": "^17.0.9",
"@types/react-router": "^5.1.17",
"@types/react-router-dom": "^5.1.5",
"@types/styled-components": "^5.1.15",
"@typescript-eslint/eslint-plugin": "^5.0.0",
"babel-cli": "^6.26.0",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.0-beta.6",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^4.0.0",
"dotenv-webpack": "^7.0.3",
"error-overlay-webpack-plugin": "^1.0.0",
"eslint": "^8.0.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-with-prettier": "^6.0.0",
"eslint-plugin-compat": "^3.3.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-react-hooks": "^4.2.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"husky": "^7.0.2",
"prettier": "^2.4.1",
"raw-loader": "^4.0.2",
"style-loader": "^3.3.0",
"stylelint": "^13.13.1",
"stylelint-config-recommended": "^5.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0",
"ts-loader": "^9.2.6",
"tslint": "^6.1.3",
"typescript": "^4.4.4",
"url-loader": "^4.1.1",
"webpack": "^5.58.2",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^4.3.1",
"webpack-merge": "^5.3.0"
},
"dependencies": {
"history": "^4.10.0",
"process": "^0.11.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"styled-components": "^5.2.1"
}
}
다음은 저의 .eslintrc 파일입니다.
{
"extends": ["airbnb", "prettier"],
"parser": "babel-eslint",
"plugins": ["prettier", "@typescript-eslint"],
"parserOptions": {
"ecmaVersion": 8,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"impliedStrict": true,
"classes": true
}
},
"env": {
"browser": true,
"node": true,
"jest": true
},
"rules": {
"arrow-body-style": ["error", "as-needed"],
"class-methods-use-this": 0,
"react/jsx-filename-extension": 0,
"global-require": 0,
"react/destructuring-assignment": 0,
"import/named": 2,
"linebreak-style": 0,
"import/no-dynamic-require": 0,
"import/no-named-as-default": 0,
"import/no-unresolved": 2,
"import/prefer-default-export": 0,
"semi": [2, "always"],
"max-len": [
"error",
{
"code": 80,
"ignoreUrls": true,
"ignoreComments": true,
"ignoreStrings": true,
"ignoreTemplateLiterals": true
}
],
"new-cap": [
2,
{
"capIsNew": false,
"newIsCap": true
}
],
"no-param-reassign": 0,
"no-shadow": 0,
"no-tabs": 2,
"no-underscore-dangle": 0,
"react/forbid-prop-types": [
"error",
{
"forbid": ["any"]
}
],
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
"react/jsx-no-bind": [
"error",
{
"ignoreRefs": true,
"allowArrowFunctions": true,
"allowBind": false
}
],
"react/no-unknown-property": [
2,
{
"ignore": ["itemscope", "itemtype", "itemprop"]
}
]
}
}
관련이 있을지는 모르겠지만, 여기 tsconfig.eslint.json 파일도 있습니다.
{
"extends": "./tsconfig.json",
"include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"],
"exclude": ["node_modules/**", "build/**", "coverage/**"]
}
어떻게 하면 고칠 수 있을까요?
에러를 검색해도, 도움이 되는 포럼이나 버그가 표시되지 않습니다.대부분 사용하지 않겠다고만 말하고 있습니다.require당신 파일에는 있지만 난 아니에요
문제는 ES6 모듈을 지원하지 않는 것처럼 보이는 1년 전에 마지막으로 업데이트된 babel-eslint 파서를 사용하려는 것이라고 생각합니다.적어도 간단한 보풀을 위해 최신 파서로 업데이트 할 수 있을 것 같습니다.
다음 작업을 수행합니다.
- 포장되어 있습니다.json, 회선을 갱신합니다.
"babel-eslint": "^10.0.2",로."@babel/eslint-parser": "^7.5.4",위의 코드에서는 동작하지만, 최신 버전인 7.16.3을 사용하는 것이 좋을 수 있습니다. - 달려.
npm i폴더 내의 터미널/명령 프롬프트에서 - .eslintrc에서 파서 행을 업데이트합니다.
"parser": "babel-eslint",로."parser": "@babel/eslint-parser", - .eslintrc에서 추가
"requireConfigFile": false,parserOptions 섹션(아래)으로 이동합니다."ecmaVersion": 8,(이것이 필요했습니다.아니면 babel이 없는 설정 파일을 찾고 있었습니다.) - 명령어를 실행하여 파일을 보풀로 처리합니다.
그 후, 2개의 설정 파일만으로, 에러가 해소되어 적절한 린핑 에러가 발생합니다.
이 문제는 .eslintrc의 파일 확장자를 js에서 json으로 변경하면 쉽게 해결할 수 있습니다(ESM 형식을 사용하여 .eslintrc.js에서 .eslintrc 개체를 내보내는 것은 작동하지 않습니다).
이 문제는 Vue.js나 Nuxt.js와 같은 최근 출시된 프레임워크에서 발생할 수 있습니다.주로 ESM 모듈을 사용했기 때문입니다(구 Node.js 버전에서는 완전히 또는 전혀 지원되지 않습니다).
이를 위한 가장 빠른 방법은 nvm과 같은 것을 사용하는 것입니다. 설치 후 다음을 실행할 수 있습니다.
nvm i 16) (v16 LTS)nvm use 16
또한 완전한 ESM 지원을 통해 프로젝트를 진행할 수 있습니다. 한 번하실 수 있습니다.node -v.
eslint-config-react-native-community 패키지를 사용한 React Native 셋업의 경우
나는 받아들여진 대답대로 했지만, 나는 아무것도 하지 않았다."babel-eslint": "^10.0.2",내 패키지에 라인이 있어요.루트 폴더의 json 파일.
- ★★★★★★★★★★★★★★★로 이동
node_modules/@react-native-community/eslint-config - j키를jjjjjjjjjj.change json, 변 j j j
"babel-eslint": "^10.0.2",로로 합니다."@babel/eslint-parser": "^7.18.2", - 파일 index.js 편집, 변경
"parser": "babel-eslint",로로 합니다.parser: '@babel/eslint-parser', - 하여 [Root Folder]를 합니다.
npm i -D @babel/eslint-parser - lint 명령어를 실행합니다.
나한테는 이런 식으로 작용했어.
위의 코멘트에서 @rich-n의 조언을 따랐는데, 다음과 같습니다.
에 .eslintrc.js하다
module.exports = {
parser: "@babel/eslint-parser",
parserOptions: {
requireConfigFile: false,
babelOptions: {
babelrc: false,
configFile: false,
// your babel options
presets: ["@babel/preset-env"],
},
},
};
이렇게 하면 vscode에서 "빨간색" 마크가 모두 지워집니다.
위의 모든 작업을 수행했는데도 실패하면 vscode를 다시 로드하십시오.
지웁니다.node_modules를 사용하여 npm install이제 작동하게 되었습니다.
Visual Studio Code에서 ESLint 확장을 제거한 후 다시 설치합니다.
"@babel/eslint-parser"는 "@babel/core"입니다. " install 에는 "npm install @babel/eslint-parser -S"를 사용해야 .npm i @babel/core -S.
언급URL : https://stackoverflow.com/questions/69554485/eslint-error-must-use-import-to-load-es-module
'programing' 카테고리의 다른 글
| 부트스트랩 네비게이션 바를 WordPress 메뉴로 변환 (0) | 2023.04.04 |
|---|---|
| BETWIN 절 대 <= AND >= (0) | 2023.04.04 |
| SqlDataReader에서 JSON으로 변환 (0) | 2023.03.25 |
| 지도 배열의 값을 jq로 합산하려면 어떻게 해야 합니까? (0) | 2023.03.25 |
| PyMongo에서 .sort 사용 (0) | 2023.03.25 |