javascript node.js eslint create-react-app eslintrc

"Parsing error: The keyword 'import' is reserved"

0. April 2023: the error can no longer be reproduced

The error is no longer reproducible. Presumably because of bug fixes in react-scripts 5.0.1. ¹
Although it's no longer reproducible, the question and my self-answer still seems to be of interest to users of Angular, and possibly others.

I will leave the question largely as it was when I asked it in March 2022.

The zip file containing the source files of the React app is here. The only difference compared to 2022 is that I've replaced the react-scripts version 4.0.3 with 5.0.1.

All below refers to March 2022

In Visual Studio Code, I get Parsing error: The keyword 'import' is reserved.

What actions would fix this error?

I provide my .eslintrc.json and package.json files in Section 2 below.

Run npm install to install the project locally. ²
– This may take about 1–9 minutes, depending on your bandwidth and hardware.
Then npm start should open the project in the default web browser.

When I did this and hit F12, I got no errors but two warnings in the console of the browser.

The warnings are in line with the rules in .eslintrc.json (Section 2 below) :

'unUsedArgument' is defined but never used. Allowed unused args must match /^_/u no-unused-vars, and
'unUsedVariable' is assigned a value but never used. Allowed unused vars must match /^_/u no-unused-vars.

1. Parsing error: The keyword 'import' is reserved

The error in the title had nothing to do with my choice of text editor.
This was easily confirmed by running ESLint from the command line.

$ npx eslint src
… Parsing error: The keyword 'import' is reserved …

2. Configuration files

package.json :

{
  "name": "parsing-error",
  "version": "0.1.0",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version"
    ]
  }
}

.eslintrc.json :

{
  "rules": {
    "no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

3. The error in Visual Studio Code

The error, Parsing error: The keyword 'import' is reserved, also shows up when I open App.js in VS Code.

I am using Visual Studio Code. But, as already noted, the choice of text editor or IDE doesn't matter. Note that – in addition to installing ESLint correctly via npm – you also have to install a plugin/extension for your specific integrated development environment (IDE).
In my case, I use the official VS Code ESLint extension.

References

^{¹
When I originally asked the question, react-scripts 4.0.3 was the latest version.

If I now use version 4.0.3, then I get other errors that have nothing to do with the question asked.
²
It's recommended to install ESLint locally.
This is what Create React App does.

For more information on how Create React App uses ESLint, see this post.
You absolutely should not be installing react-scripts globally.}

Solution

Disclaimer

As stated in the question, the error can no longer be reproduced.
This means there is no longer any valid suggestion to resolve the error.
I leave the rest of the answer mainly unaltered, in case others still find it helpful. ^*

The original answer

Here is a simple solution – just move the rules attribute from .eslintrc.json to the eslintConfig attribute of package.json. ¹

And don't keep .eslintrc.json. Just delete it! ²

The package.json file will now be as follows.

package.json :

{
  "name": "parsing-error",
  "version": "0.1.0",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app",
    "rules": {
      "no-unused-vars": [
        "warn",
        {
          "argsIgnorePattern": "^_",
          "varsIgnorePattern": "^_"
        }
      ]
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version"
    ]
  }
}

That's it! ³

Check to see that you were successful : \

npx eslint **/*.js

Expect to see :

No error. – Yay!

If your text editor (VS Code in my case) is still open, make sure that you restart it before expecting to see the error go away!

References

^{^*
The one thing I've changed is the command for running ESLint from the command line – npx eslint **/*.js has the advantage of working fine for the new eslint.config.js file ("flat config") as well as for the old .eslintrc.* configuration files.
¹
I got the idea from this post.
²
Don't run npm init @eslint/config either.
The error(s) will persevere if you don't delete .eslintrc.json!
³
A. If you suspect that you may have a global installation of ESLint, first run:

npm uninstall eslint --global
B. If you have already run npm install – as suggested on line 7 of the question – then you shouldn't need to run npm install eslint --save-dev to install ESLint, because having react-scripts in package.json means that ESLint gets installed when running npm install.}