無法加載配置“react”以從

Question

我正在嘗試使用以下網站在不使用 create-react-app 的情況下創建一個反應應用程序：

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

但是，我不斷收到這個錯誤，上面寫着

WARNING in./src/index.js 模塊警告（來自./node_modules/eslint-loader/dist/cjs.js）：無法加載配置“react”以擴展自。

我已經嘗試安裝所有依賴項並花了幾個小時在谷歌上搜索答案，但我似乎無法找出問題所在。

這是我的 package.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.js：

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"
    }
  }
}

這是 my.babelrc：

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

有沒有人有什么建議？ 我正在絞盡腦汁想弄清楚這一點，但我遇到了很多麻煩。 它加載網頁，但是根本沒有使用反應。

先感謝您。！ 我真的很感謝你的幫助。

Answer 1

我在create-react-app遇到了類似的問題，我做到了

yarn add eslint-config-react-app -D

我認為你應該嘗試：

yarn add eslint-config-react -D

Answer 2

在對依賴項（ react-scripts ， react ... ）進行大升級后出現此錯誤，解決方案是刪除yarn.lock文件

Answer 3

我正在閱讀相同的教程並遇到了同樣的問題。 我想出了幾件事：

包eslint-config-react已過時。 它已經 4 年沒有更新了，所以我卸載了它，而是安裝了（作為 devDependency） eslint-config-airbnb 。 還有其他的 eslint 配置包，但我聽說 Airbnb 的 style guide 很受歡迎。 然后在我的 eslintrc 文件中，我將"extends": "react"替換為"extends": "airbnb" ：

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

問題是eslint-config-react包。

Answer 4

留在這里以供將來參考：

就我而言，發生這種情況是因為我正在使用 Lerna 並且它正在提升一些必要的依賴項。 添加nohoist選項將lerna.json文件解決了這個問題對我來說：

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

Answer 5

我遇到了同樣的問題。 我做了這些步驟，它奏效了。

將其安裝為依賴項

npm i eslint-config-react-app

然后在您的根文件夾中，創建一個文件名.eslintrc.json並將此代碼添加到該文件中

  "extends": "react-app"

Answer 6

我修復它手動安裝eslint-config-react-app包：

yarn add eslint-config-react-app -D

# or

npm install -D eslint-config-react-app

Answer 7

當我刪除

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

從package.json它工作。

這是因為eslint-config-react-app包已經過時了。

Answer 8

如果您從 GitHub 或任何其他版本控制系統克隆了 repo，請嘗試將此文件.eslintrc.json添加到您的根文件夾。 不要忘記. 一開始。

第一個答案也很有魅力。 只是想我也會添加我的。

Answer 9

如果您使用的是 Yarn 2（漿果）

在 .yarnrc.yml 文件中添加 nodeLinker: node-modules

如https://yarnpkg.com/getting-started/install 中所述

Answer 10

在收到消息“Failed to load config ‘react-app’ to extend from... 我從 package.json 中刪除了以下幾行：

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

它起作用了

Answer 11

要解決此問題，您需要在項目文件夾中運行此命令。 第一步：

yarn set version berry

運行后，將在您的本地文件夾（項目文件夾）中生成一個文件和文件夾：

• .yarnrc.yml（文件）
• .yarn（文件夾）

第二步：在 .yarnrc.yml 文件中添加nodeLinker: node-modules

第三步：運行此命令yarn install

最后運行yarn start

提示：當您想從 yarn 1.x 遷移到 2.x 或 3x 或更高版本時，此方法很有用。

Answer 12

甚至我也遇到了這個問題，列出了解決這個問題的步驟。

1. 首先刪除節點模塊並重新安裝節點模塊。
2. 然后我在運行 npm run build 時遇到了一個問題，我得到了react-scripts not found 。 所以我使用 npm 安裝了 react-scripts
3. 然后我遇到了這個問題，無法加載配置 react-app 來擴展 form 。 我用

npm 添加 eslint-config-react-app

Answer 13

如果您使用紗線：

1- 刪除：node_modules 和 yarn.lock
2-運行：紗線安裝

注意：對於 npm 應該是同樣的方法。

Answer 14

當我嘗試將我的 create-react-app 模板部署到 Vercel 時，我遇到了同樣的錯誤。

1. 刪除 yarn.lock 文件
2. （在 Vercel 儀表板上）將構建命令從 auto 覆蓋到“npm run build”
3. （在 Vercel 儀表板上）將安裝命令從 auto 覆蓋到“npm install”

幫助我成功部署。

Answer 15

如果您的依賴項中有eslint ，請將其刪除。
將使用來自react-scripts的eslint

"eslint": "^7.32.0"

Answer 16

也有這個問題。 如果有人發現自己處於這種困境並且您正在分叉一個項目，請刪除包鎖為我解決了這個問題。

Answer 17

我有同樣的問題。

• 我刪除了 package-lock.json 和 node_modules
• 運行“npm 安裝”

它工作得很好。