ESLint 오류로 인해 create-react-app을 컴파일할 수 없습니다.
새로운 템플릿을 작성했습니다.create-react-appreact v17이 포함되어 있고, eslint 의존성을 이전과 같이 설치했습니다.이것이 제 패키지입니다.json 파일
{
"name": "gym-nation",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.0",
"classnames": "^2.2.6",
"moment": "^2.29.1",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-intl": "^5.8.6",
"react-redux": "^7.2.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.5.0",
"@typescript-eslint/parser": "^4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.12.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.14.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^3.9.2",
"node-sass": "^4.14.1",
"prettier": "^2.1.2",
"react-app-rewired": "^2.1.6"
}
}
여기 eslintrc.json: (아직 모든 규칙을 추가하지 않았습니다.)
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["react-app", "prettier"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"rules": {
"prettier/prettier": [
"error",
{
"printWidth": 140,
"singleQuote": true,
"editor.formatOnSave": true,
"arrowParens": "always",
"jsxSingleQuote": true,
"tabWidth": 2,
"trailingComma": "none"
}
],
"no-unused-vars": "error"
}
}
앱을 실행하면 다음 오류로 인해 컴파일이 실패합니다.
Line 113:13: 'isLoading' is assigned a value but never used no-unused-vars
이전 프로젝트를 진행했는데, eslint 에러가 코드에 나타나 앱이 크래쉬하지 않았습니다.누구라도 제가 망친 곳을 지적해 주실 수 있나요?
create-react-app어플리케이션의 eslint를 셋업 합니다.
eslint 오류가 콘솔이 아닌 브라우저에 표시되었습니다.
한번은 모든 의존관계를 디버깅했습니다....인 것 .react-scripts보풀 에러의 원인이 되고 있었습니다.
의 " " " "react-scripts:"4.0.0"이 될 수.eslint는 이 오류를 발생시킬 수 .
솔루션:
이 문제는 에서 수정되었지만 프로젝트에 존재하는 eslint 오류는 기본적으로 경고로 변환되지 않습니다.플래그를 포함하는 .env 파일을 생성해야 합니다.이 플래그로 인해 eslint 오류는 개발 중 오류가 아닌 경고로 수신됩니다.
이 플래그는 생산 중 및 실행 중인 git 훅일 때 무시되며, eslint 오류가 있는 코드를 커밋하려고 할 때 오류가 발생합니다.
업데이트 2:
활성 문제: https://github.com/facebook/create-react-app/issues/9887
react-scripts: 4.0.2가 출시될 때까지 이 문제의 회피책은 다음과 같습니다.
패치 패키지와 포스트 인스톨을 개발 의존관계로서 인스톨 합니다.
node_modules/react-scripts/config/webpack.config.js로 이동하여 다음과 같이 변경합니다.
편집이 끝나면 실 패치 패키지 리액트 스크립트를 실행합니다.종속성 패치가 포함된 패치 폴더가 생성됩니다.
종속성을 설치할 때 매번 이렇게 하고 싶지 않기 때문입니다.패키지에 다른 스크립트를 추가합니다.json 파일.
"postinstall":"patch-package".
위의 스크립트는 종속성을 설치할 때마다 실행됩니다.패키지 폴더도 리포트에 푸시해야 합니다.앱 배포 중에도 변경이 필요한 경우.
이 회피책을 제공해 주신 @fernandad님 감사합니다.
업데이트 1:
react-scripts:3.4.4현재 사용 가능한 해결 방법이 없기 때문에 버전을 선택합니다.브라우저가 아닌 콘솔에서 오류가 발생하고 있습니다.
- node_modules 및 package.lock/yarn.lock을 삭제합니다.
- react-scripts를 4.0.0에서3.4.4로 다운그레이드 하겠습니다
- 종속성을 설치하고 앱을 시작합니다.
webpack을 사용하지 않기 때문에 env 변수를 사용하여 수정할 수 있었습니다.
VSCode 확장을 사용하고 있는지 확인하고 eslint를 개발 종속성(필요한 다른 플러그인)으로 설치했는지 확인하십시오.
개발 중에 코드를 보풀로 만들되 실패하지 않으려면 .env.development에 다음을 추가하십시오.ESLINT_NO_DEV_ERRORS=true
프로덕션 빌드에서 eslint를 완전히 비활성화하려면 .env.production에 다음 명령을 추가합니다.DISABLE_ESLINT_PLUGIN=true
그 후 빌드에는 실패하지 않습니다.왜 eslint가 빌드에 실패해야 하는지 이해할 수 없습니다.코드의 품질을 유지하기 위해서입니다만, 반드시 실시한다고는 할 수 없습니다.
가능한 해결책을 찾는 데 몇 시간이 걸렸습니다.
1- 회피책: 패키지 내에 규칙을 추가합니다.json 파일
"eslintConfig": {
"extends": ["react-app"],
"rules": {
"no-unused-vars": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"max-len": "warn"
}
}
]
},
2- 루트 폴더에 .env 파일을 추가하여 다음 내용을 포함하는 .eslintrc.dlash 파일을 사용할 수 있습니다.
DISABLE_ESLINT_PLUGIN=true
ESLINT_NO_DEV_ERRORS=true
DISABLE_ESLINT_PLUGin-는 개발 및 운영에서 eslint-webpack-plugin을 비활성화합니다.이것은 필수입니다.
ESLINT_NO_DEV_ERRORS - 개발 중 ESLint 오류를 경고로 변환합니다.그 결과 ESLint 출력은 에러 오버레이에 표시되지 않게 됩니다.이것만으로는 버그를 고칠 수 없습니다.
Next.js의 경우
.next.config.js하게 합니다.ignoreDuringBuilds eslint " " :
module.exports = {
eslint: {
ignoreDuringBuilds: true
}
}
를 둘러싼 은 경고를 했다.CI=true을 고칠 수 있는 은 그것을 사용하는 것입니다.CI=falseeslint eslint ll 。여기서 eslint 규칙을 통해 코드베이스 또는 커스텀 규칙 집합으로 인해 발생하는 다른 경고를 제안할 필요는 없습니다.
scriptspackage.json:
"scripts": {
"start": "CI=false react-app-rewired start",
"build": "CI=false react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
또는 다음과 같은 방법으로 실행할 수도 있습니다.
CI=false npm run start
CI=false npm run build
GitHub 관련 문제 참조:
https://github.com/facebook/create-react-app/issues/10062
https://github.com/facebook/create-react-app/issues/9887
이 컴파일된 문제를 해결하여 .env 파일에 추가할 수도 있습니다.나는 그 문제를 직시하고 이 코드 줄을 사용하여 해결하려고 한다.
SKIP_PREFLIGHT_CHECK=true
또는
ESLINT_NO_DEV_ERRORS=true
SKIP_PREFLIGHT_CHECK=true or ESLINT_NO_DEV_ERRORS=true
또는 package.json을 편집할 수도 있습니다.
"start": "ESLINT_NO_DEV_ERRORS='true' react-scripts start",
"build": "DISABLE_ESLINT_PLUGIN='true' react-scripts build",
일시적인 회피책의 경우는,.eslintrc.js이를 통해 현재 노드 환경을 확인하고 그에 따라 규칙을 설정할 수 있습니다.예:
const isProd = process.env.NODE_ENV === 'production';
const warnDevErrorProd = isProd ? 2 : 1;
{
...
"rules": {
...
"prettier/prettier": warnDevErrorProd,
"no-console": warnDevErrorProd,
...
}
...
}
이렇게 하면 웹 팩 구성을 변경하여 규칙을 변경하기 위해 이젝트를 수행할 필요가 없습니다.
create-react-app을 v4로 업그레이드 했을 때 eslint 문제 페이지 -> 에러가 발생하여 컴파일을 할 수 없게 되어 버렸습니다.리액트 기능을 사용하여 기대했던 즉각적인 경험은 아닙니다.fast-refresh:) Eslint 7의 규칙(및 에러 레벨)이 변경된 것이 원인일 것입니다.하지만, 전치 과정이 어떻게 시작되었는지는prettier/prettier이전에는 제 린터에 한정되어 있던 문제가 아직도 불분명합니다.
갱신하다
몇 가지 일이 있어요.Eslint의 변경(및 에어비앤비 등의 확장 기능)은 오류와 경고의 혼합을 흔들어 놓을 가능성이 높지만, 가장 관련성이 높은 것은 CRA v4가 더 이상 자체적인 eslint 규칙을 사용하지 않고 프로젝트의 규칙, 즉 편집기에서 사용하는 보풀링 규칙을 사용하는 것입니다.업그레이드 전에 CRA의 프로젝트 규칙 사용은EXTEND_ESLINT이 레지스터는 디폴트로 유효하게 되어 있어 설정할 수 없게 되었습니다.envv4에 접속합니다.
어쨌든, 앱을 변환하기 위한 퀵 픽스는 다음과 같습니다.
git commit변경- cli: " " " " cli " " :
yarn prettier --config ./.prettierrc --write '**/*.{js|jsx}' - 했습니다.
.eslintrc를 에러로'warn'( 추가됨)'no-param-reassign': 'warn'일).reduce□□□□□□□□★
총 5분 정도 걸렸어요.
, 이 이 앱의 해, 우선 할 수.fast-refreshCRA, CRA, Eslint v7 버전이다.
(E)
나도 같은 문제가 있었다.
이 문제는 Github의 CRA(버전 4.0)에서 해결되지 않은 문제가 있습니다.
나는 이것에 대한 임시 해결책을 찾았다.
node_modulesReact-Scripts형식 " " "4.0.0로로 합니다.3.4.4- 말을 덧붙이다
SKIP_PREFLIGHT_CHECK=true.env - 려려를
npm install - 즐기세요 :)
: : 약 ps.env(프로젝트에는 용량이 존재하지 않습니다)를 루트 폴더에 할 수 있습니다. 루트 폴더에 파일 용량을 생성할 수 있습니다.
같은 에러가 발생했는데, 이것이 나에게 효과가 있었습니다.
앱을 만들고 싶었을 때 단말기에서 오류와 함께 다음과 같은 제안을 받았습니다.
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
위 3개 다 했어요.그리고 나서 나는 다음과 같이 했다.
I uninstalled eslint
npm uninstall -g create-react-app //uninstall create react app
npm install eslint --save-dev //reinstalled eslint
npm install -g yarn //installed yarn because I was using npm
used yarn to install create react app
yarn create-react-app nameofapp //used yarn to create a new app
npm을 시작했을 때, 실이 문제를 수습/처리하고 있는 것처럼 느껴졌습니다.
나는 여기서 약간의 시행착오를 겪어야 했지만 마침내 성공했다.저는 전문가가 아니기 때문에 후드 아래에서 정확히 무슨 일이 일어났는지 잘 몰랐지만, 실이 에스린트 문제를 해결해 주었기 때문에 효과가 있었습니다.
줄 세 줄 쓰세요..eslintrc.json
"no-unused-vars": "error"
와 함께
"no-unused-vars": "warn"
저는 그 변경으로 인해 오류가 아닌 경고가 발생할 것으로 예상합니다.
텍스트 편집기 또는 IDE를 다시 시작해야 합니다.
면책 사항
당신의 질문에서 읽을 수 있는 것을 보면, 제 팁이 도움이 될 것이라고 생각합니다.★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
eslint-loader는 폐지되어 있습니다.eslint-webpack-plugin현재 create-react-app 체크에서 사용되고 있습니다.이것에 의해, 다음의 2개의 옵션을 추가해 문제를 해결할 수 있었습니다.eslint-webpack-plugin
앱을 후 이 을 리액트 앱에 합니다.ESLintPlugin★★★★
new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
context: paths.appSrc,
failOnError: false, <== `This one`
emitWarning: true, <== `And this one`
// ESLint class options
cwd: paths.appPath,
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve('eslint-config-react-app/base')],
rules: {
...(!hasJsxRuntime && {
'react/react-in-jsx-scope': 'error'
})
}
}
})
ESLintPlugin 메서드에 프로젝트의 node_modules\react-scripts\config\webpack.config.js 내의 두 가지 속성을 추가할 수 있습니다.
fail On Error: false, emiss Warning: true,
new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
context: paths.appSrc,
cache: true,
failOnError: false,
emitWarning: true,
// ESLint class options
cwd: paths.appPath,
module.module.module.module에서 다음 규칙을 변경하여
failOnError: false,
emitWarning: true,
{
test: /\.(js|mjs|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
failOnError: false,
emitWarning: true,
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
}
언급URL : https://stackoverflow.com/questions/64518226/my-create-react-app-is-failing-to-compile-due-to-eslint-error
'programing' 카테고리의 다른 글
| SQL Server에서의 지연 가능한 제약 조건 (0) | 2023.02.22 |
|---|---|
| AngularJS App: .js 파일을 index.html에 포함하는 방법 (0) | 2023.02.22 |
| JAVA에서 JSONArray를 정렬하려면 어떻게 해야 합니까? (0) | 2023.02.22 |
| AngularJS, Karma/Jasmine 테스트는 왜 이렇게 느리게 실행됩니까? (0) | 2023.02.22 |
| React에서 양식 레이블의 고유 ID를 생성하는 방법 (0) | 2023.02.22 |