ESLint warnings – Parsing error: Unexpected token

The “Parsing error: Unexpected token” ESLint warning typically occurs when ESLint encounters a syntax error or unsupported syntax in your code. This often happens when ESLint is not properly configured to handle certain syntax features, such as JSX, TypeScript, or ES6+ features like async/await or class properties.

Steps to Resolve “Parsing error: Unexpected token” ESLint Warning:

1. Ensure Proper ESLint Configuration

ESLint needs to be configured to understand modern JavaScript syntax. Specifically, for JSX, TypeScript, or ES6+ features, you need to install and configure the correct ESLint parser and plugins.

For React (JSX) Projects:

Make sure you have the eslint-plugin-react plugin and babel-eslint or @babel/eslint-parser (for JSX and modern JavaScript support) installed.

Install necessary packages:

npm install --save-dev eslint eslint-plugin-react @babel/eslint-parser

For TypeScript Projects:

If you’re using TypeScript, install the following:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. Update .eslintrc Configuration

Your ESLint configuration file (typically .eslintrc.json or .eslintrc.js) needs to use the correct parser and parser options for modern JavaScript and JSX syntax.

For React (JSX) and Babel setup:

Update your .eslintrc to include the @babel/eslint-parser as the parser:

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "requireConfigFile": false, 
    "babelOptions": {
      "presets": ["@babel/preset-react"]
    }
  },
  "plugins": ["react"],
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "env": {
    "browser": true,
    "es2021": true
  }
}

For TypeScript setup:

Update your .eslintrc to use the @typescript-eslint/parser as the parser:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "env": {
    "es2021": true,
    "node": true
  }
}

3. Add Necessary Babel or TypeScript Configurations

If you’re using Babel or TypeScript, make sure the necessary configurations are also in place.

Babel:

• Install Babel Presets: npm install --save-dev @babel/preset-env @babel/preset-react
• Babel Configuration (babel.config.json or .babelrc): { "presets": ["@babel/preset-env", "@babel/preset-react"] }

TypeScript:

• Ensure you have a tsconfig.json file with the appropriate configurations for your TypeScript project.

4. Ensure Compatibility with Node and ESLint Versions

Ensure that you’re using compatible versions of Node.js, ESLint, and your parser.

For example, Babel parser or TypeScript parser might need specific versions of Node.js to work correctly.

You can check your Node.js version with:

node -v

Make sure it aligns with the versions supported by your project dependencies.

5. Restart ESLint/Editor

Sometimes, ESLint warnings may persist due to caching or editor-related issues. After making configuration changes:

• Restart ESLint (if you’re running it via a CLI).
• Restart your code editor (like VSCode) to reload ESLint settings.

6. Check for Syntax Errors

The error could also be caused by actual syntax errors in your code (for example, missing brackets, commas, etc.). Verify that the code where ESLint is throwing the error is syntactically correct.

7. Use ESLint Ignore for Specific Files (Optional)

If you encounter specific files that ESLint cannot parse and don’t need to be linted, you can add them to an .eslintignore file or configure them to be ignored.

Example .eslintignore:

node_modules/
dist/

---

---