How do I config the vscode-prettier-eslint to format the NextJs Project.

[leslee-glints]

In NextJs Project, it has an open box .eslint.json with it eslint convention.

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

I followed the config vscode-prettier-eslint setting process, but not work.

The error output will show like below

Error: Failed to load plugin 'react-hooks' declared in 'CLIOptions': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received '' 
TypeError: Failed to load plugin 'react-hooks' declared in 'CLIOptions': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''
    at new NodeError (node:internal/errors:387:5)
    at createRequire (node:internal/modules/cjs/loader:1304:13)
    at Object.resolve (/Users/peiningli/Company/LSCM/EPD-IoT-System/node_modules/.pnpm/@eslint+eslintrc@2.0.3/node_modules/@eslint/eslintrc/lib/shared/relative-module-resolver.js:23:16)
    at Object.ModuleResolver.resolve (/Users/peiningli/Company/LSCM/EPD-IoT-System/node_modules/.pnpm/@rushstack+eslint-patch@1.2.0/node_modules/@rushstack/eslint-patch/src/modern-module-resolution.ts:235:36)
    at ConfigArrayFactory._loadPlugin (/Users/peiningli/Company/LSCM/EPD-IoT-System/node_modules/.pnpm/@eslint+eslintrc@2.0.3/node_modules/@eslint/eslintrc/lib/config-array-factory.js:1067:33)
    at ConfigArrayFactory._loadPlugin (/Users/peiningli/Company/LSCM/EPD-IoT-System/node_modules/.pnpm/@rushstack+eslint-patch@1.2.0/node_modules/@rushstack/eslint-patch/src/modern-module-resolution.ts:243:35)
    at /Users/peiningli/Company/LSCM/EPD-IoT-System/node_modules/.pnpm/@eslint+eslintrc@2.0.3/node_modules/@eslint/eslintrc/lib/config-array-factory.js:958:33
    at Array.reduce (<anonymous>)
    at ConfigArrayFactory._loadPlugins (/Users/peiningli/Company/LSCM/EPD-IoT-System/node_modules/.pnpm/@eslint+eslintrc@2.0.3/node_modules/@eslint/eslintrc/lib/config-array-factory.js:954:22)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (/Users/peiningli/Company/LSCM/EPD-IoT-System/node_modules/.pnpm/@eslint+eslintrc@2.0.3/node_modules/@eslint/eslintrc/lib/config-array-factory.js:754:44)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (/Users/peiningli/Company/LSCM/EPD-IoT-System/node_modules/.pnpm/@eslint+eslintrc@2.0.3/node_modules/@eslint/eslintrc/lib/config-array-factory.js:694:20)
    at _normalizeObjectConfigData.next (<anonymous>)
    at ConfigArrayFactory.create (/Users/peiningli/Company/LSCM/EPD-IoT-System/node_modules/.pnpm/@eslint+eslintrc@2.0.3/node_modules/@eslint/eslintrc/lib/config-array-factory.js:489:16)
    at createCLIConfigArray (/Users/peiningli/Company/LSCM/EPD-IoT-System/node_modules/.pnpm/@eslint+eslintrc@2.0.3/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:168:47)
    at CascadingConfigArrayFactory.clearCache (/Users/peiningli/Company/LSCM/EPD-IoT-System/node_modules/.pnpm/@eslint+eslintrc@2.0.3/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:339:32)
    at new ESLint (/Users/peiningli/Company/LSCM/EPD-IoT-System/node_modules/.pnpm/eslint@8.41.0/node_modules/eslint/lib/eslint/eslint.js:449:32)
    at $me (/Users/peiningli/.vscode/extensions/rvest.vs-code-prettier-eslint-5.1.0/dist/extension.js:185:69)
    at /Users/peiningli/.vscode/extensions/rvest.vs-code-prettier-eslint-5.1.0/dist/extension.js:193:700
    at zme (/Users/peiningli/.vscode/extensions/rvest.vs-code-prettier-eslint-5.1.0/dist/extension.js:185:1458)

I've tried many ways to make it work, and I found that if the extends used only eslint:recommended, it work.

However, it seems not a good solution by removing the next eslint convention.

So, how can I config the .eslintrc within next to make the vscode-prettier-eslint work well ?

Example Project

In my team, we use vercel nextJs admin as the startup project

Screenshots

Versions (please complete the following information):

• VS Code Prettier ESLint extension: v5.1.0
• Visual Studio Code: 1.78.2
• Node: v18.16.0
• Package Manager [npm 9.5.1, yarn 1.22.19, pnpm 8.5.1]

System Specifications (please complete the following information):

• OS: [e.g. MacOS M1 13.4]
• RAM Size: [e.g. 16 GB]

[froko]

Same issue here. Any thoughts?

[idahogurl]

@froko @leslee-glints This is an issue with @rushstack/eslint-patch. An issue has been created on their repository page. In the meantime, you can find the fix explained in issue https://github.com/idahogurl/vs-code-prettier-eslint/issues/72.

[ci-vamp]

@froko @leslee-glints @idahogurl i fixed this issue and got it merged into eslint-patch. it is now available on the latest version of the package ("@rushstack/eslint-patch": "^1.3.2").

unfortunately i cant reach the nextjs devs to have them upgrade the package version in their eslint extension.

good news though is you can override it.

in your package.json add this:

"overrides": {
    "@rushstack/eslint-patch": "^1.3.2"
  }

then run npm i / yarn to update the package. quit and reopen vscode and you should be good to go.

[github-actions[bot]]

This issue is stale because it has been open for 14 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.