Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issues with @babel/eslint-parser

See original GitHub issue

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": [
    "rules": {
        "react/prop-types": 0,
        "react/react-in-jsx-scope": 0
    "parser": "@babel/eslint-parser",
    "plugins": [
    "parserOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    "settings": {
        "react": {
            "version": "detect"

My .babelrc:

    "presets": [
                "runtime": "automatic"
    "plugins": [

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"

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:5

github_iconTop GitHub Comments

soyelmorenocommented, Jun 29, 2021

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 ( to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx ( 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!

cdvillardcommented, Nov 28, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bug: using babel-eslint parser throws error #15157 - GitHub
When I remove the parser: 'babel-eslint'. The linting runs without error... Participation. I am willing to submit a pull request for this issue....
Read more >
@babel/eslint-parser - npm
ESLint parser that allows for linting of experimental syntax transformed by Babel. Latest version: 7.19.1, last published: 4 months ago.
Read more >
Updating babel-eslint to @babel/eslint-parser for React apps
As of March 2020, babel-eslint has been deprecated, and is now @babel/eslint-parser .
Read more >
Problem with babel-esLint: Parsing error: require() of ES Module
I inherited a similar project with this issue. In case it helps someone else, the configuration changes I had to make were all...
Read more >
ESLint: Parsing error: No Babel config file detected ... - YouTrack
Hello,. Since moving from the deprecated babel-eslint to the recommended @babel/eslint-parser my colleagues using WebStorm and IntelliJ IDEA started getting ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found