확장할 구성 "반응"을 로드하지 못했습니다.

확장할 구성 "반응"을 로드하지 못했습니다.

아래 사이트에서 create-react-app을 사용하지 않고 리액트 앱을 작성하려고 합니다.

https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/

하지만, 다음과 같은 오류가 계속 발생합니다.

./src/index.js 모듈 경고(./node_modules/eslint-loader/dist/cjs.js에서):확장할 구성 "반응"을 로드하지 못했습니다.

모든 의존 관계를 설치하려고 시도했고 몇 시간 동안 답변을 검색했지만 문제를 찾을 수 없습니다.

제 소포입니다.json:

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development",
    "format": "prettier --write \"src/**/*.js\"",
    "eslint-fix": "eslint --fix \"src/**/*.js\"",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "react": "^16.13.1",
    "react-bootstrap": "^1.3.0",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.3.0",
    "eslint": "^7.9.0",
    "eslint-config-react": "^1.1.7",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-react": "^7.20.6",
    "html-webpack-plugin": "^4.4.1",
    "less": "^3.12.2",
    "less-loader": "^7.0.1",
    "prettier": "2.1.1",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

이것은 webpack.config.config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
      // path: __dirname + '/dist',
      path: path.resolve(__dirname, 'build'),
      publicPath: '/',
      filename: 'bundle.js'
    },
    devServer: {
      contentBase: './build'
    },
    module: {
      rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      }
      ]
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: path.resolve('./index.html'),
        })],
  };

이것은 나의 .eslintrc:

  {
  "parser": "babel-eslint",
  "extends": "react",
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

그리고 이건 내 .babelrc:

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  }

제안해 주실 분 있나요?나는 이것을 알아내려고 머리를 쥐어짜고 있는데 매우 곤란하다.웹 페이지를 로드하지만 리액션이 전혀 활용되지 않습니다.

잘 부탁드립니다!!도와주셔서 정말 감사합니다.

저도 비슷한 문제가 있었어요create-react-app그리고 내가 그랬습니다.

yarn add eslint-config-react-app -D

한 번 시도해 보세요.

yarn add eslint-config-react -D

제거했을 때

  "extends": [
      "react-app"
    ]
  },

부터package.json효과가 있었어요

이것은, 그 이유는,eslint-config-react-app패키지가 오래되었습니다.

의존관계를 대폭 업그레이드한 후에 이 오류가 발생하였습니다.react-scripts,react... )의 해결 방법은,yarn.lock파일

설치 중 수정eslint-config-react-app수동으로 패키지화:

yarn add eslint-config-react-app -D

# or

npm install -D eslint-config-react-app

가지고 계신 경우eslint당신의 의존관계에서 그것을 제거하세요.
그eslint부터react-scripts사용되다

"eslint": "^7.32.0"

저도 같은 튜토리얼을 받다가 같은 문제에 부딪혔어요.몇 가지 알아냈어요

패키지eslint-config-react구식입니다.4년 동안 업데이트되지 않았기 때문에 이를 제거하고 대신 설치했습니다(dev Dependency로).eslint-config-airbnb다른 eslint 구성 패키지도 있습니다만, Airbnb 스타일 가이드가 매우 인기가 있다고 들었습니다.그리고 내 eslintrc 파일에서 나는 대체했다."extends": "react"로."extends": "airbnb":

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

문제는eslint-config-react패키지.

나중에 참조할 수 있도록 여기 남겨두겠습니다.

내 경우, 이것은 내가 Lerna를 사용하고 있었고 그것이 필요한 의존성을 끌어올렸기 때문에 일어났다.추가 중nohoist옵션lerna.json파일을 통해 문제가 해결되었습니다.

"nohoist": [
  "*react*",
  "*react*/**",
  "*react-native*",
  "*react-native*/**"
],

저도 같은 문제를 겪고 있었어요.이 단계를 거쳤더니 효과가 있었어요.

의존관계로 설치

npm i eslint-config-react-app

그런 다음 루트 폴더에 파일 이름 .eslintrc.json을 만들고 해당 파일에 이 코드를 추가합니다.

  "extends": "react-app"

실을 사용하는 경우:

삭제:및 yarn 1-": node_modules yarn yarn.lock
실 2-실행: 실 설치

주의: npm에 대해서도 같은 접근방식이 필요합니다.

Yarn 2(berry)를 사용하는 경우

nodeLinker: 노드 모듈을 .yarnrc.yml 파일에 추가합니다.

https://yarnpkg.com/getting-started/install에 기재되어 있는 바와 같이

GitHub 또는 다른 버전 제어 시스템에서 repo를 복제한 경우 루트 폴더에 .eslintrc.json 파일을 추가해 보십시오.잊지 마세요.★★★★★★★★★★★★★★★★★★.

첫 번째 답변도 매력적으로 작용합니다.나도 같이 넣을까 해서

이 문제도 있었다.만약 누군가가 이러한 곤경에 처해 있고 프로젝트를 중단하고 있다면, 패키지 잠금을 삭제하면 문제가 해결됩니다.

이 문제를 해결하려면 프로젝트 폴더에서 이 명령을 실행해야 합니다.첫 번째 단계:

yarn set version berry

실행 후 로컬 폴더(프로젝트 폴더)에 파일과 폴더가 하나씩 생성됩니다.

• .syslogrc.yml(파일)
• .folder(폴더)

두 번째 단계:nodeLinker: 노드 모듈을 .yarnrc.yml 파일에 추가합니다.

번째 단계: 이 합니다.yarn install

으로 ''를 실행하다yarn start

힌트 : 이 방법은 실 1.x에서 2.x 또는 3.x 이상으로 이행하는 경우에 편리합니다.

이 문제를 해결하기 위한 단계를 나열하는 문제가 있었습니다.

1. 먼저 노드 모듈을 분리한 후 노드 모듈을 다시 설치합니다.
2. 그 후 npm run build 실행 중 문제가 발생하여 react-scripts를 찾을 수 없었습니다.그래서 npm을 사용하여 react-script를 설치했습니다.
3. 그 후 이 문제로 확장 폼에 config react-app을 로드하지 못했습니다.를 사용하여 수정했습니다.

npm add eslint-config-module-app

Create-React-App 템플릿을 Vercel에 배포하려고 할 때 동일한 오류가 발생했습니다.

1. yarn.lock 파일 삭제 중
2. (Vercel 대시보드에서) 빌드 명령을 자동에서 "npm run build"로 덮어씁니다.
3. (Vercel 대시보드에서) 설치 명령어를 자동에서 "npm install"로 덮어씁니다.

도입에 도움이 되었습니다.

저도 같은 문제가 있어요.

• package-lock.json과 node_modules를 삭제했습니다.
• 'npm install' 실행

그것은 잘 작동했다.

"Config "react-app"을 로드하지 못했습니다"라는 메시지가 표시된 후...패키지에서 다음 행을 제거했습니다.json:

    "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },

그리고 그것은 성공하였다.

언급URL : https://stackoverflow.com/questions/63912721/failed-to-load-config-react-to-extend-from