Eslint Error: Parsing error: Unexpected character '@'

[MurlinGao]

I want use decorators in my react project and there is an error just show out.I had read a lot of docs for this, but it's not help.This has been bothering me for a long time., please help me.

My project used: create-react-app + craco + eslint.

There is some configs in my files:

package.json:

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^5.6.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.10.5",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
    "@babel/plugin-transform-regenerator": "^7.10.4",
    "@babel/plugin-transform-runtime": "^7.10.5",
    "@commitlint/cli": "^8.1.0",
    "babel-eslint": "10.1.0",
    "cz-conventional-changelog": "^2.1.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.20.3"
  }
}

craco.config.js:

eslint: {
    enable: true /* (default value) */,
    mode: 'file',
  },
  babel: {
    // presets: ['react-app'],
    plugins: [
      '@babel/plugin-transform-runtime',
      [
        '@babel/plugin-proposal-decorators',
        {
          'legacy': true
        }
      ],
      '@babel/plugin-transform-regenerator',
      '@babel/plugin-proposal-optional-chaining',
      '@babel/plugin-proposal-nullish-coalescing-operator'
    ],
  },

.eslintrc.js:

module.exports = {
  root: true,
  env: {
    'es6': true,
    'browser': true,
    'commonjs': true
  },

  extends: ['airbnb', 'react-app'],
  globals: {
    Babel: true,
    React: true
  },
  parserOptions: {
    ecmaVersion: 2020,
    parser: 'babel-eslint',
    sourceType: 'module'
  },

};

[mdjermanovic]

Hi @MurlinGao, thanks for the issue!

parserOptions: {
ecmaVersion: 2020,
parser: 'babel-eslint',
sourceType: 'module'
},

parser is a top-level property in the configuration. It should be:

parser: 'babel-eslint',
parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module'
}

[nzakas]

Questions has been answered, so closing.