Using ESLint with Parcel, React, and ES6 class properties without babelrc

Question

I am trying to setup ESLint, React, Parcel to work together. Also I don't have babelrc setup since Parcel handles that internally.

Everything works fine except that I can't figure out how to stop ESLint from complaining about valid ES6 imports, class properties and JSX syntax.

Here's the repo where this can tried out: https://github.com/mehtapratik/parcel-babel-import

npm run dev //run parcel 
npm run lint // run eslint

Here's my ESLint configuration

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

The problem started showing up when I added "parser": "@babel/eslint-parser". I added this configuration to avoid ESLint from showing error about class properties:

class App {
   // Without "parser": "@babel/eslint-parser" following line will show ESLint error
   timestampe = Date.now();
}

I searched other issues and if I add requireConfigFile: false, ESLint starts complaining about JSX syntax.

Is there any way, where I can configure ESLint to understand JSX syntax and ES6 class properties while not configuring babel on my own?

Answer 1

You should be able to get eslint to recognize class properties (timestampe = Date.now();) with the native parser (e.g. no need for @babel/eslint-parser) by upgrading to version 8.

See this answer