When starting a new Next.js application with the specific configuration below:
✔ What name do you want to give your project? … app
✔ Do you want to use TypeScript? … No / [Yes]
✔ Do you want to use ESLint? … No / [Yes]
✔ Do you want to use Tailwind CSS? … No / [Yes]
✔ Do you want to use the `src/` directory? … No / [Yes]
✔ Do you want to use App Router? (recommended) … No / [Yes]
✔ Do you want to customize the default import alias? … [No] / Yes
Webstorm version 2023.1.3 shows two errors related to ESLint and Prettier packages, which seem to be connected.
1. ESLint
Specifically complains about missing parser on all typescript XML files (.tsx).
On looking at more details, the log displays:
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
The configuration within the `.eslintrc.json` file is as follows:
{
"extends": "next/core-web-vitals"
}
2. Prettier
After installing the prettier package using npm i -D prettier
Attempting to format the code using the Ctrl+Alt+Shift+P shortcut results in an error for all file types (.ts, .tsx, .js, .jsx...):
Looking into more details of the log:
/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)
Process finished with exit code -1
I have searched extensively for similar errors but haven't found a solution yet. I also tried using other IDEs like VSCode where both Prettier and ESLint work without any issues.
To replicate these errors, you can follow the steps outlined in the description.
My attempts to resolve this include:
- For ESLint:
- Installing a local version of
@typescript-eslint/parserusing
.npm i -D @typescript-eslint/parser - Adjusting the ESLint configuration by changing the parser configuration (in my case to
@babel/eslint-parser)
- For Prettier:
- Tried modifying the configurations in the `.prettierrc` file without success.
It appears that both packages are using a version of ECMAScript that does not support nullish coalescing operators (< ES2020), but I'm unsure how to control this. The issue with ESLint seems to be specific to Next.js, even though everything works fine in VSCode.
I was hesitant to report this issue to the Next.js team as it seems like a larger problem.