Issues with @babel/eslint-parser

[derekbunch]

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!

[mhasanrabbi]

I ran into the same problem. Here's another simple fix:

• [x] Open your .eslintrc.json file
• [x] Go to "parserOptions"
• [x] Add "requireConfigFile": false

Here's how it should look:

"parserOptions": {
    "requireConfigFile": false,
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }

Your .eslintrc.json should look:

{
  "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
  },
  "plugins": ["react", "import", "jsx-a11y"],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "requireConfigFile": false,
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Close #6

[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.

[cdvillard]

I also wanted to highlight that this is still an issue even after stopping and restarting the Parcel server, which was lightly addressed in the beginning of the following lesson.

Edit: Like many students, I'm reacting to things as they happen as opposed to going through multiple lessons. I did try to rm -rf .cache dist but that worked . . . sort of. If I remove @babel from my eslint config, run the rm -rf command for the cache and dist folder, and start the server, I'll won't get those error _if either @babel is listed in the plugins property of the eslint config or there's a trailing comma on the end of that array. Weird stuff, but for completion purposes, I'm going with the former.

Before the trailing comma

After the trailing comma (see the yellow warning at the end of line 17)

[sturgeonphillip]

Another two cents, for the sake of clarity:

I added "@babel" to the plugins array, but I also ran: npm install @babel/eslint-plugin --save-dev

1. delete cache and dist folders.
2. run: npm install @babel/eslint-plugin --save-dev
3. add @babel to plugins array at root object .eslintrc.json file.
4. finally, npm run dev

   
   // .eslintrc.json

{ "extends": [ ... ], "rules": { ... }, "plugins": [ "react", "import", "jsx-a11y", "@babel" ], ... }

basically, this package: [@babel/eslint-plugin](https://www.npmjs.com/package/@babel/eslint-plugin)

also:
• remember these steps (or one of the aforementioned variants) if you plan to go through his intermediate React v3 course. you make a clean copy of intro-v6's final product for each section of intermediate-v3.
• and here's a plug, in case you want to experience it live, updated with new tech:
[complete intro v7 is scheduled for March 1!](https://frontendmasters.com/workshops/complete-react-v7/)