Issues with @babel/eslint-parser

I keep getting the following error when I try to enable @babel/plugin-proposal-class-properties in my .babelrc and @babel/eslint-parser in my .eslintrc.json.

Parsing error: No Babel config file detected for …/React-intro/src/Details.jsx. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.eslint.

I’ve tried adding requireConfigFile: false to my eslintrc.json but then eslint can’t find my .babelrc. Both files are in the root directory of my project. Cant figure out what im doing wrong. I’ve confirmed that my .eslintrc.json, .babelrc, and package.json are identical to the ones in 09-managing-state-in-class-components. I’m just going to ignore the error to get through the course as everything still works, but any help on what I might be doing wrong would be greatly appreciated.

My .eslintrc.json:

{
    "extends": [
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:react/recommended",
        "plugin:jsx-a11y/recommended",
        "plugin:react-hooks/recommended",
        "prettier"
    ],
    "rules": {
        "react/prop-types": 0,
        "react/react-in-jsx-scope": 0
    },
    "parser": "@babel/eslint-parser",
    "plugins": [
        "react",
        "import",
        "jsx-a11y"
    ],
    "parserOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    }
}

My .babelrc:

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

My package.json:

{
  "name": "adopt-me",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "7.12.16",
    "@babel/eslint-parser": "7.13.4",
    "@babel/plugin-proposal-class-properties": "7.13.0",
    "@babel/preset-env": "7.13.5",
    "@babel/preset-react": "7.12.13",
    "eslint": "7.18.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.22.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "parcel": "1.12.3",
    "prettier": "2.2.1"
  },
  "dependencies": {
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-router-dom": "5.2.0"
  },
  "browserslist": [
    "last 2 Chrome versions"
  ]
}

[soyelmoreno]

TL/DR: Add @babel to the plugins array in the root of .eslintrc.json.

I was getting the exact same error. I googled a bit, and based on what I found, I tried adding "requireConfigFile": false to parserOptions in .eslintrc.json. This made that error go away! But then I got this error on all of my JSX:

Parsing error: .../React-intro/src/Details.js: Support for the experimental syntax 'jsx' isn't currently enabled (41:14):

  39 |   render() {
  40 |     if (this.state.loading) {
> 41 |       return <h2>Loading...</h2>;
     |              ^
  42 |     }
  43 |     const { animal, breed, city, state, description, name } = this.state;
  44 |     return (
  
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing. (eslint)

I found this blog post describing the same thing. That post recommended this: install @babel/preset-react, then add "babelOptions": {"presets": ["@babel/preset-react"]} to parserOptions. Well, I (and @derekbunch) already had that installed, and we already had it in the presets section of .babelrc. So I added the babelOptions object to .eslintrc.json. But then the error was:

Parsing error: Cannot find module '@babel/preset-react'
Require stack:
- .../React-intro/node_modules/@babel/core/lib/config/files/plugins.js
- .../React-intro/node_modules/@babel/core/lib/config/files/index.js
- etc.

But that’s weird because aren’t we telling ESLint in babelOptions that we are using a preset called @babel/preset-react? I googled “eslint babelOptions” and found this StackOverflow post with a similar problem and a helpful answer. From that answer, I thought that I really needed both a plugins key and a presets key, like this:

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

But it turned out that the most important thing was to add @babel to the plugins array in the root of .eslintrc.json:

"plugins": ["react", "import", "jsx-a11y", "@babel"],

If you have that, you don’t even need requireConfigFile or babelOptions in your .eslintrc.json file!

@derekbunch, I hope that eliminates all of your red squiggly lines, like it did for me. What’s funny is, why wasn’t this happening to @btholt in the React v6 course (published May 4, 2021)? Maybe something changed between then and now. Very mysterious, and pretty frustrating!

[cdvillard]

TL/DR: Add @babel to the plugins array in the root of .eslintrc.json.

I have to agree that @soyelmoreno’s fix is still relevant almost six months later. Adding "@babel to your plugins array in the .eslintrc.json file basically corrects ESLint’s errors. I’m sure @btholt’s v7 will address this, but consider this a +1 for that solution until that’s released.