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

Question

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

What actions would fix this error?

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 refer to March 2022

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. ³

4. Is this question a duplicate?

I have been asked if my question is a duplicate of
Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint)?

I believe it is not a duplicate of that question.

The origin of the package.json of my question comes from a Create React App via the command
npx create-react-app <the-name-of-my-app>.

The package.json of the other question is missing the react-scripts npm package which every Create React App must have. The other question is clearly not about the Create React App, whereas my question is.

4a. How is ESLint integrated into Create React App?

As this answer explains, every Create React App depends directly on the react-scripts package.

The react-scripts package in turn depends on the eslint-config-react-app package (and on many other packages), which in turn depends on the @babel/eslint-parser package. I will come back to the latter dependency in the next subsection.

4b. Do any of the answers to the other question solve my question?

In the Community FAQ index for Stack Overflow there is a link to What can I do when I think a question is not a duplicate?, which in turn links to another post that (implicitly) defines when a question is a duplicate of another question.

In summary, the key criterion for if a question is a duplicate is if any of the answers to the other question provides a solution to my own question.

So the key question is if there is such an answer.

First of all, the highest voted answer is obsolete in that it suggests installing the deprecated babel-eslint package. The authors of that package explicitly instruct using the successor package @babel/eslint-parser instead of babel-eslint.

Installing the deprecated babel-eslint package would be even more problematic in my Create React App example, since @babel/eslint-parser is already installed (via eslint-config-react-app). I cannot accept a proposed solution that simultaneously installs two different versions of the ESLint Parser (of which one is deprecated). So the highest voted-answer is not an acceptable answer to the the question I asked here.

The accepted answer is not relevant in my case, as I installed ESLint only locally (not globally).

For all the other answers, I tried the suggested solutions on my reproducible example, one by one. Most of them resulted in a different error message than mine, but none of them solved my question – contrary to the two self-answers I've posted below.

4c. Concluding remarks

Although the error messages are identical in the two questions – the reasons for why they occur appear to be different. Although debatable, I conclude that my question does not seem to be a duplicate of Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint).

5. Other reports of the error

The last seven references in the list below are links to previous reports of the error – or similar errors.
Some of those links (issues) might be related to this question, but likely not all of them.

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
• In VS Code, add "eslint.nodePath": "C:\\Program Files\\nodejs", to settings.json
• 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
• Parsing error: The keyword 'export' is reserved
• Parsing error: The keyword 'import' is reserved
• ERROR: Parsing Error: The keyword 'const' is reserved
• ESLint: "error Parsing error: The keyword 'const' is reserved"
• Setting up Airbnb ESLint with React and Webpack
• Parsing error: The keyword 'enum' is reserved
• ESLint Parsing error: Unexpected token

---

¹ 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.

³ Apart from installing the extension, I have added "eslint.nodePath": "C:\\Program Files\\nodejs", to my (user) settings.json file in VS Code. No other changes.

Answer 1

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 . --ext .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 you expect to see the error go away!

References

• A more cumbersome solution to the question asked
• Suggesting to have ESLint rules in package.json under eslintConfig
• Installation of ESLint using npm
• ESLint gets installed even though it isn't explicitly mentioned in package.json | Section 1

---

¹ 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.
The reason is that having react-scripts in package.json means that ESLint gets installed by npm install.
Section 1 of this answer tells us that ESLint is in the dependency tree of react-scripts.

Answer 2

0. Disclaimers

This answer has its share of bad advice and flaws. I rather strongly suggest having a look at this other answer before continuing to read here. Some of the problems with this answer include :

• It's much longer and more cumbersome than the other answer.
• This solution suggests creating a .eslintrc.json file, which makes it less elegant and less robust than the other answer.
• Instead of just fixing the original error, this solution leads to two new errors, which in turn need to be dealt with.
• When I wrote this answer, I was somewhat ignorant about Create React App, which is one of the tags of the question asked. For example, installing ESLint doesn't make any sense, since ESLint is already automatically included in every Create React App project.

I've thought about deleting this answer altogether, but since it has received an upvote, and since it's not in my interest to delete it, I've decided to leave it undeleted for the time being.

This Disclaimers section is my honest attempt not to mislead anyone.

1. Prerequisites

If the server is running, close it by hitting Ctrl+C.

I strongly recommend uninstalling any global installations of ESLint.
To see what global packages are installed, in the command line run: ¹

npm list --global --depth 0

If ESLint is globally installed, uninstall it by running:

npm uninstall eslint --global

To correctly install ESLint into your local project, I recommend performing the following two steps.

1. Locally install ESLint.

2. Create a functioning .eslintrc.json file.

As it turns out, you will also need to do a third step.

3. Update all npm packages to their latest versions.

2. Locally install ESLint

To locally install ESLint, run: ²

npm install eslint --save-dev

This will add

  ,
  "devDependencies": {
    "eslint": "^7.32.0"
  }

at the end of package.json.

3. Create a .eslintrc.json file that works

NOTE! Before moving on, do yourself a favor by saving a copy of your current .eslintrc.json file, as the following command will destroy (recreate) that file.

To create a new .eslintrc.json file, run:

npm init @eslint/config

You'll be asked several questions, to which I answer by pressing Enter to choose the default, except for the format which I choose to be JSON (instead of JavaScript).

In addition to creating the .eslintrc.json file, this will also add the "eslint-plugin-react": "^7.29.2" attribute under devDependencies to the package.json file. ³

The command npm init @eslint/config destroys the existing .eslintrc.json file, so you will have to manually add back any "rules" or other JSON settings that you want to keep.
In this case, I add back the rules that were in the original .eslintrc.json.
The result is as below.

.eslintrc.json :

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

Now when I open VS Code, instead of an error there are two warnings, which is exactly the desired outcome.

Great! But wait – unfortunately there turns out to be a fly in the ointment. The problem is that when I now run npm start to open the project in the web browser and hit F12, two errors show up in the console.
The error messages are:

• Uncaught ReferenceError: process is not defined, and
• Line 0: Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context.

Luckily, I have already posted a solution to this problem, namely:
Update all npm packages to their latest versions.
The section below is a bit succinct, so if you want more flesh on the bones, go visit that other answer.

4. Update all npm packages to their latest versions

Consider updating all npm packages to their latest versions.
The purpose is to decrease the risk of getting version conflicts.
The advice to update all packages has also been put forth in this answer.

A. Globally install npm-check-updates

In the command line, run:

npm install --global npm-check-updates

B. Update package.json to contain the latest versions

The following command will write the latest package version numbers to your package.json:

npm-check-updates --upgrade

Here is what it looks like in Windows 10:

C. Install the latest versions

In the command line, run:

npm install

D. Check for errors in the browser and/or in the terminal

In the command line, run:

npm start

Both the browser and the terminal now display five errors.

Discomforting, eh?

Yes definitely! – But don't give up hope! Just close the server (Ctrl+C) and try it over and over again.
Yesterday when I got these errors, all I needed to do was to run npm start one more time.
Today I tried runningnpm start 4-5 more times, but still got the errors.
So I tried npm install && npm start twice, and finally it ran without errors.
Not sure what is going on. Maybe some time has to pass before it works?

Finally, there are no errors in the browser.

And the terminal says Compiled successfully!

Yay! ⁴

5. Conclusion

Following the steps above helped me remedy the error in the question title:
Parsing error: The keyword 'import' is reserved.

For a project with settings even slightly different,⁵ just copy-pasting from the .eslintrc.json file above is unlikely to work.
Running npm init @eslint/config and upgrading all packages is more likely to be successful.

References

• A better, shorter, more elegant, and more robust answer to the question asked
• ESLint is already automatically included in every Create React App project
• Info on the [create-react-app] tag at Stack Overflow
• npm – get a list of globally installed packages
• Installation of ESLint using npm
• Start using @eslint/config in your project
• When should I use @babel/eslint-parser?
• Update all npm packages to their latest versions
• Update all current packages to their latest versions
• npm-check-updates – documentation

---

¹ I am on Windows 10, but I expect all the commands provided here to work just as fine on both Linux and macOS.

² A. Expect this command to take about 5-10 minutes to complete.
B. As long as your source code is not transformed by Babel, there is no reason to install @babel/eslint-parser. Just normal eslint should be enough. See When should I use @babel/eslint-parser?
If you are using TypeScript, then you will need @babel/eslint-parser.
The command to install is:
npm install eslint @babel/core @babel/eslint-parser --save-dev
The npm init @eslint/config configuration command should be used in the same way as for the normal (non-@babel) ESLint.

³ The "eslint-plugin-react" attribute in package.json doesn't seem to be of much relevance though.

⁴ The two warnings still show up in the text editor – just as they should.

⁵ For example, you might be using Angular or Vue instead of React.

Answer 3

I was receiving this error message on a third-party js file in my angular app. I have eslint already installed. I updated my .eslintrc.json to add "*.js" to the "overrides" --> "files" array and the error went away.

{
    "root": true,
    "ignorePatterns": ["projects/**/*"],
    "overrides": [
        {
            "files": ["*.js", "*.ts"],
        }
    ]
}