Failed to load config "react" to extend from

Question

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

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

however, I keep getting this error that says

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.

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

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'),
        })],
  };

this is my.eslintrc:

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

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.

Answer 1

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

yarn add eslint-config-react-app -D

I think you should try:

yarn add eslint-config-react -D

Answer 2

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

Answer 3

I was going through the same tutorial and came across the same problem. I figured out a few things:

The package eslint-config-react is outdated. It hasn't been updated in 4 years, so I uninstalled that and instead installed (as a devDependency) eslint-config-airbnb . There are other eslint config packages, but Airbnb's style guide I heard is very popular. Then in my eslintrc file I replaced "extends": "react" to "extends": "airbnb" :

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

The problem is the eslint-config-react package.

Answer 4

Leaving this here for future reference:

In my case this was happening because I was using Lerna and it was hoisting up some of the necessary dependencies. Adding nohoist option to the lerna.json file resolved the issue for me:

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

Answer 5

I was having the same issue. I did these steps and it worked.

Install it as a dependency

npm i eslint-config-react-app

then in your root folder, create a file name .eslintrc.json and add this code in that file

  "extends": "react-app"

Answer 6

I fix it installing eslint-config-react-app package manually:

yarn add eslint-config-react-app -D

# or

npm install -D eslint-config-react-app

Answer 7

When I removed

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

from package.json it worked.

This is because the eslint-config-react-app package is outdated.

Answer 8

If you cloned the repo from GitHub or any other version control system, try adding this file .eslintrc.json to your root folder. Don't forget the . at the beginning.

The first answer works like a charm as well. Just thought I would add mine as well.

Answer 9

If you are using Yarn 2(berry)

Add nodeLinker: node-modules in your .yarnrc.yml file

As specified in https://yarnpkg.com/getting-started/install

Answer 10

After getting the message "Failed to load config “react-app” to extend from... I removed the following lines from package.json:

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

And it worked

Answer 11

For fixing this issue you need to run this command in your project folder. First step:

yarn set version berry

After run that, one file and folder will be generated in your local folder (Project folder) :

• .yarnrc.yml(file)
• .yarn(folder)

Second step: Add nodeLinker: node-modules in your .yarnrc.yml file

Third step: run this command yarn install

Finally run yarn start

Tip : This approach is useful when you want to migrate from yarn 1.x to 2.x or 3x or higher.

Answer 12

even I had this issue, listing down steps to solve this issue.

1. First remove node modules and install node modules again.
2. Then I had a issue while I run npm run build, I was getting react-scripts not found . So I installed react-scripts using npm
3. Then I had this issue failed to load config react-app to extend form . I fixed it using

npm add eslint-config-react-app

Answer 13

If you use yarn:

1- Delete: node_modules and yarn.lock
2- Run: yarn install

Note: For npm should be the same approach.

Answer 14

I've faced the same error when I was trying to deploy my create-react-app template to Vercel.

1. Deleting yarn.lock file
2. (On Vercel Dashboard) Overriding build command from auto to "npm run build"
3. (On Vercel Dashboard) Overriding install command from auto to "npm install"

helped me to deploy successfully.

Answer 15

If you have eslint in your dependencies, remove that.
The eslint from react-scripts will be used

"eslint": "^7.32.0"

Answer 16

Had this issue as well. If anyone finds themselves in this predicament and you are forking a project, delete the package-lock resolved the issue for me.

Answer 17

I have got the same issue.

• I deleted package-lock.json and node_modules
• ran 'npm install'

It worked fine.