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. 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. 2
– 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
- How to create a Minimal, Reproducible Example
- One of my self-answers
- Zip file containing the needed project files
- Installing ESLint globally (
npm install eslint --global
) is not recommended - Create React App
- How ESLint is integrated into Create React App
- VS Code ESLint extension
- Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint)
- The react-scripts npm package
eslint-config-react-app
@babel/eslint-parser
- The Community FAQ index for Stack Overflow
- What can I do when I think my question's not a duplicate?
- An implicit definition of when a question is a duplicate
- The highest voted answer of other question
- The deprecated
babel-eslint
package - Installing ESLint globally might be a bad idea
- You absolutely should not be installing
react-scripts
globally
1
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.
2
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.