无法加载配置"react"消息.从...延伸 [英] Failed to load config "react" to extend from

问题描述

我正在尝试创建一个React应用，而无需通过以下网站使用create-react-app:

I am trying to create a react app without using create-react-app using the following website:

但是，我不断收到此错误提示

however, I keep getting this error that says

./src/index.js中的警告模块警告(来自./node_modules/eslint-loader/dist/cjs.js):无法加载配置"react"消息.扩展.

WARNING in ./src/index.js Module Warning (from ./node_modules/eslint-loader/dist/cjs.js): Failed to load config "react" to extend from.

我尝试安装所有依赖项，并花了几个小时来搜索答案，但似乎无法找出问题所在.

I have tried installing all the dependencies and have spent hours googling an answer, but I can't seem to figure out the problem.

这是我的package.json:

This is my 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:

this is my 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:

this is my .eslintrc:

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

这是我的.babelrc:

and this is my .babelrc:

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

有人有什么建议吗?我为弄清楚这一点而动了脑筋，但遇到了很多麻烦.它会加载网页，但是根本没有使用反应.

Does anyone have any suggestions? I am wracking my brain trying to figure this out and I am having a lot of trouble. It loads the webpage, however, react isn't utilized at all.

提前谢谢！！非常感谢您的帮助.

Thank you in advance!! I really appreciate all your help.

推荐答案

我在create-react-app中也遇到了类似的问题

I had a similar problem with create-react-app and I did

纱线添加eslint-config-react-app -D

yarn add eslint-config-react-app -D

我认为您应该尝试:

纱线添加eslint-config-react -D

yarn add eslint-config-react -D

这篇关于无法加载配置"react"消息.从...延伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！