无法加载配置“react”以从答案

【问题标题】：Failed to load config "react" to extend from无法加载配置“react”以从
【发布时间】：2021-01-02 20:28:05
【问题描述】：

我正在尝试使用以下网站在不使用 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）：未能加载配置“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"
    }
  }
}

这是我的 .babelrc:

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

有人有什么建议吗？我正在绞尽脑汁想弄清楚这一点，但我遇到了很多麻烦。它加载了网页，但是根本没有使用 react。

提前谢谢你！！非常感谢您的帮助。

【问题讨论】：

标签： javascript reactjs webpack eslint

【解决方案1】：

我正在阅读相同的教程并遇到了相同的问题。我想出了一些事情：

包eslint-config-react 已过时。它已经 4 年没有更新了，所以我卸载了它，而是安装了（作为 devDependency）eslint-config-airbnb。还有其他的 eslint config 包，但是我听说的 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 包上。

【讨论】：

【解决方案2】：

将此留在这里以供将来参考：

在我的例子中，这是因为我使用了 Lerna 并且它正在提升一些必要的依赖项。在lerna.json 文件中添加nohoist 选项为我解决了这个问题：

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

【讨论】：

【解决方案3】：

create-react-app 也有类似的问题，我确实遇到了

yarn add eslint-config-react-app -D

我觉得你应该试试：

yarn add eslint-config-react -D

【讨论】：

第一行 yarn add eslint-config-react-app -D 有效。第二行较短，没有-app，对我不起作用。
这取决于你在你的项目中使用了什么，如果 react-app 那么它对你有用，在这个问题中用户没有使用 react-app 那么第二行对他有用。
yarn add -D eslint-config-react-app babel-eslint 对我来说就像魔法一样
你不应该这样做，因为 creat-react-app 是自带的。

【解决方案4】：

在大量升级依赖项（react-scripts、react ...）后出现此错误，解决方案是删除 yarn.lock 文件

【讨论】：

【解决方案5】：

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

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

在https://yarnpkg.com/getting-started/install中指定

【讨论】：

【解决方案6】：

收到消息“无法加载配置“react-app”以扩展... 我从 package.json 中删除了以下几行：

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

成功了

【讨论】：

【解决方案7】：

要解决此问题，您需要在项目文件夹中运行此命令。第一步：

yarn set version berry

运行后，会在你的本地文件夹（项目文件夹）中生成一个文件和文件夹：

.yarnrc.yml(文件)
.yarn(文件夹)

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

第三步：运行这个命令yarn install

终于运行yarn start

提示：当您想从 yarn 1.x 迁移到 2.x 或 3x 或更高版本时，此方法很有用。

【讨论】：

【解决方案8】：

我修复它手动安装eslint-config-react-app 包：

yarn add eslint-config-react-app -D

# or

npm install -D eslint-config-react-app

【讨论】：

你有正确的答案：见github.com/yarnpkg/berry/issues/8#issuecomment-732536482

【解决方案9】：

当我删除时

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

来自package.json 成功了。

这是因为eslint-config-react-app 包已过时。

【讨论】：

【解决方案10】：

即使我遇到了这个问题，也列出了解决这个问题的步骤。

先移除节点模块，然后重新安装节点模块。
然后我在运行 npm run build 时遇到问题，我得到 react-scripts not found。所以我使用 npm 安装了 react-scripts
然后我遇到了这个问题无法加载配置 react-app 以扩展表单。我修复了它使用

npm 添加 eslint-config-react-app

【讨论】：

【解决方案11】：

如果你使用纱线：

1- 删除：node_modules 和 yarn.lock
2-运行：纱线安装

注意：对于 npm 应该是同样的方法。

【讨论】：

【解决方案12】：

我在尝试将我的 create-react-app 模板部署到 Vercel 时遇到了同样的错误。

删除 yarn.lock 文件
（在 Vercel 仪表板上）将构建命令从 auto 覆盖为“npm run build”
（在 Vercel 仪表板上）将安装命令从 auto 覆盖到“npm install”

帮我部署成功。

【讨论】：

【解决方案13】：

如果您的依赖项中有 eslint，请将其删除。
将使用来自react-scripts 的eslint

"eslint": "^7.32.0"

【讨论】：

【解决方案14】：

如果您从 GitHub 或任何其他版本控制系统克隆了 repo，请尝试将此文件 .eslintrc.json 添加到您的根文件夹。不要忘记开头的.。

第一个答案也很有效。只是想我也一样。

【讨论】：

【解决方案15】：

我遇到了同样的问题。我执行了这些步骤，并且成功了。

将其安装为依赖项

npm i eslint-config-react-app

然后在您的根文件夹中，创建一个文件名 .eslintrc.json 并将此代码添加到该文件中

  "extends": "react-app"

【讨论】：