Search code examples
typescriptnext.jseslintprettiereslintrc

SyntaxError: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.json » eslint-config-next/core-web-vitals

After creating a new Next.js application with the following configuration

✔ What is your project named? … app
✔ Would you like to use TypeScript? … No / [Yes]
✔ Would you like to use ESLint? … No / [Yes]
✔ Would you like to use Tailwind CSS? … No / [Yes]
✔ Would you like to use `src/` directory? … No / [Yes]
✔ Would you like to use App Router? (recommended) … No / [Yes]
✔ Would you like to customize the default import alias? … [No] / Yes

Webstorm 2023.1.3 complains with two errors for ESLint and Prettier packages, which look related.

1. ESLint

Complains about missing parser on all typescript XML files (.tsx), only!

ESLint error popup

Clicking to view more details, the log outputs:

SyntaxError: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.json » eslint-config-next/core-web-vitals » /app/node_modules/eslint-config-next/index.js#overrides[0]': Unexpected token '?'

/app/node_modules/typescript/lib/typescript.js:139
    for (let i = startIndex ?? 0; i < array.length; i++) {
                             ^

SyntaxError: Unexpected token '?'
    at compileFunction (<anonymous>)
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/app/node_modules/@typescript-eslint/typescript-estree/dist/convert.js:29:25)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
Process finished with exit code -1

This is the configuration in .eslintrc.json file:

{
  "extends": "next/core-web-vitals"
}

2. Prettier

After installing prettier package with npm i -D prettier Trying for example to prettify the code using Ctrl+Alt+Shift+P shortcut WebStorm throws an error for all files (.ts, .tsx, .js, .jsx...):

Prettier error popup

Clicking to view more details, the log outputs:

/app/node_modules/prettier/index.cjs:481
  const comments = node.comments ?? (node.comments = []);
                                  ^
SyntaxError: Unexpected token '?'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at requireInContext (/home/user/.local/share/JetBrains/Toolbox/apps/WebStorm/ch-0/231.9161.29/plugins/prettierJS/prettierLanguageService/prettier-plugin.js:156:12)
    at PrettierPlugin.requirePrettierApi (/home/user/.local/share/JetBrains/Toolbox/apps/WebStorm/ch-0/231.9161.29/plugins/prettierJS/prettierLanguageService/prettier-plugin.js:129:24)
    at PrettierPlugin.<anonymous> (/home/user/.local/share/JetBrains/Toolbox/apps/WebStorm/ch-0/231.9161.29/plugins/prettierJS/prettierLanguageService/prettier-plugin.js:81:44)
Process finished with exit code -1

I've searched several places for similar errors to no avail. Tried other IDEs like VSCode, no errors thrown, prettier works, ESLint works too.

To reproduce the errors you can follow the instructions I've provided in the description.

I've tried to:

  1. For ESLint:
  1. For Prettier:
  • Tried to change the .prettierrc file configurations but no success.

It seems to me, the parsers for both packages are using a version of ECMAScript which do not support nullish coalescing operators (< ES2020), but I don't know where I can have control of this. The issue with ESLint seems to be related to Next.js but then again everything works fine in VSCode.

I was hesitant to post an issue for the Next.js team since this looked like a broader issue.

Solution

  • For everyone else stumbling upon this issue:

    After a week of investigation, I finally realized that the Node.js parser that I was using by default in the WebStorm IDE was Node.js 12.22.9.

    The reason why that is, is because I am using Linux Ubuntu 22.04. At the time of this writing, Ubuntu 22.04 already comes with a pre-installed version of Node.js (yes, check your usr/bin/node). ESLint has probably long dropped the support for that version (lulz).

    So, if you want to get that shiny linter running on your WebStorm, I would suggest one of these two things:

    1. Uninstall the pre-installed version of Node.js (this helps with mismatches around running node in the terminal) that comes with Ubuntu 22.04 and install nvm package which is a Node.js version manager package to control the version you're using on your projects. To do so:

      • Uninstall Node.js: sudo apt purge nodejs npm
      • [Ignore this step if you already have nvm] Install nvm: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash (from nvm)
      • Choose the node interpreter you want in WebStorm. Open WebStorm. Ctrl+Alt+S to open Settings. Go to Languages & Frameworks | Node.js. Choose the most appropriate version. I chose the last version that nvm outputs for me which at the time of this writing is v16.13.1. Optionally, you can add a .nvmrc file to the root of your project and define the version you want inside - this will keep the integrity of the version of the Node.js you're using, regardless of what IDE or machine you are on - great for collaboration with your team.

    2. Just choose an appropriate Node.js version in WebStorm by following the latter point

    Et voilà, ESLint and Prettier should work just fine.