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.

score 84 · Answer 1 · edited Aug 18 '21 at 15:27

84

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

edited Aug 18 '21 at 15:27

Eduardo Cuomo

17,828
6
117
94

answered Feb 04 '21 at 19:18

Aryan Pitliya

1,245
9
6

6

The first line `yarn add eslint-config-react-app -D` worked. The second line is shorter and doesn't have `-app` and it didn't work for me. – Ivan Akcheurov Sep 23 '21 at 20:12
It depends on what you have used in your project, if react-app then it will work for you and in this question user have not used react-app then the second line would work for him. – Aryan Pitliya Sep 24 '21 at 07:51
1

`yarn add -D eslint-config-react-app babel-eslint` worked like magic for me – Srikanth Sharma Oct 16 '21 at 10:43
You should not do this as creat-react-app comes with it. – Anthony Mar 03 '22 at 01:15

score 57 · Answer 2 · edited Aug 26 '21 at 05:47

57

When I removed

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

from package.json it worked.

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

edited Aug 26 '21 at 05:47

kyun

9,710
9
31
66

answered Aug 26 '21 at 00:35

vedanth bora

634
4
7

6

With what version of `react-scripts` is `eslint-config-react-app` outdated? – Paul Razvan Berg Mar 12 '22 at 14:45

score 22 · Answer 3 · edited Aug 18 '21 at 15:27

22

I had this error after a big upgrade of dependencies (react-scripts, react ... ) and the solution was to remove yarn.lock files

edited Aug 18 '21 at 15:27

Eduardo Cuomo

17,828
6
117
94

answered Apr 15 '21 at 08:28

Franxoois

323
2
4

score 16 · Answer 4 · answered Feb 05 '22 at 12:45

16

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

"eslint": "^7.32.0"

answered Feb 05 '22 at 12:45

Gianfranco P.

10,049
6
51
68

1

Thank you so much. I was almost going crazy over this issue on webstorm and your solution has worked! – Vikingslord Jul 11 '22 at 08:14
2

This is the best option to use with `react: 18.2.0`, and `react-scripts: "5.0.1`, which happens to be the latest version at the time of this comment. Removing `"eslintConfig": { "extends": "react-app" },` from `package.json` file works perfectly well. The eslint from `react-scripts would be used` – Godstime Aug 21 '22 at 17:20
1

This actually seems at the best fix out the ones listed on this page since it fixes the root cause rather than adding an workaround – Immugio Mar 03 '23 at 07:39

score 12 · Answer 5 · answered Aug 18 '21 at 15:29

12

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

answered Aug 18 '21 at 15:29

Eduardo Cuomo

17,828
6
117
94

1

you have the right answer: see https://github.com/yarnpkg/berry/issues/8#issuecomment-732536482 – Chui Tey Aug 22 '21 at 03:20
That works for me and added --force – Fahd Rahali Apr 26 '22 at 01:38

score 5 · Answer 6 · answered Feb 26 '22 at 08:44

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"

answered Feb 26 '22 at 08:44

Prince

103
1
6

score 4 · Answer 7 · answered Nov 23 '21 at 14:48

4

If you use yarn:

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

Note: For npm should be the same approach.

answered Nov 23 '21 at 14:48

renelhs

57
4

score 3 · Answer 8 · edited Sep 25 '20 at 23:30

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.

score 3 · Answer 9 · answered Dec 06 '20 at 03:43

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*/**"
],

score 1 · Answer 10 · answered Jul 06 '21 at 17:09

1

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

answered Jul 06 '21 at 17:09

Seldom Madallang

21
4

score 1 · Answer 11 · edited Mar 30 '22 at 12:23

1

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.

edited Mar 30 '22 at 12:23

Egidius

971
1
10
22

answered Feb 10 '22 at 14:19

Obonyo

141
1
7

I realized this works if the code had linters. – Obonyo May 29 '22 at 09:06

score 1 · Answer 12 · answered Mar 24 '22 at 08:58

1

I have got the same issue.

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

It worked fine.

answered Mar 24 '22 at 08:58

Ashwini Kondalakadu

83
1
8

score 1 · Answer 13 · answered Sep 20 '22 at 19:30

1

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.

answered Sep 20 '22 at 19:30

Vinny

43
4

score 1 · Answer 14 · answered Mar 02 '23 at 06:55

1

The most voted answer by "Aryan Pitliya" was the answer but didn't work until I downloaded latest eslint version.

So the solution for me was:

npm i eslint@latest

THEN

npm i eslint-config-react-app -D

answered Mar 02 '23 at 06:55

Rawand Deheliah

1,220
10
11

Babak · Answer 15 · 2021-08-17T18:01:28.693

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.

score 0 · Answer 16 · answered Oct 28 '21 at 10:14

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

First remove node modules and install node modules again.
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
Then I had this issue failed to load config react-app to extend form. I fixed it using

npm add eslint-config-react-app

score 0 · Answer 17 · answered Jan 16 '22 at 08:21

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

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

helped me to deploy successfully.

score -2 · Answer 18 · answered Aug 08 '21 at 07:54

-2

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

answered Aug 08 '21 at 07:54

cooldesignpro

29
3

Failed to load config "react" to extend from

18 Answers18

Linked