Failed to load parser './parser.js' declared in .eslintrc.json

[sumitgoelpw]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

next info output

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:25 PDT 2022; root:xnu-8020.140.41~1/RELEASE_X86_64
    Binaries:
      Node: 16.16.0
      npm: 8.11.0
      Yarn: 3.2.2
      pnpm: N/A
    Relevant packages:
      next: 12.2.3-canary.17
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

package.json

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "info": "next info"
  },
  "dependencies": {
    "next": "canary",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.3"
  }
}

What browser are you using? (if relevant)

NA

How are you deploying your application? (if relevant)

NA

Describe the Bug

next dev is working fine, but next lint is failing with the following error.

info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
Failed to load parser './parser.js' declared in '.eslintrc.json » eslint-config-next/core-web-vitals » /Users/sumit.goel/Development/monorepo/.yarn/__virtual__/eslint-config-next-virtual-c1b113f562/0/cache/eslint-config-next-npm-12.2.3-8aa11ec9cd-bba70ac318.zip/node_modules/eslint-config-next/index.js': eslint-config-next tried to access next, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: next (via "next/dist/compiled/babel/eslint-parser")
Required by: eslint-config-next@virtual:569035de073023aa8b0b5018956311b227b0a904329a09033178811fc3e35e666a9055672cf1571918d7dc6006c37bb02ee20b7a6a08428927cea962afec4a25#npm:12.2.3 (via /Users/sumit.goel/Development/monorepo/.yarn/__virtual__/eslint-config-next-virtual-c1b113f562/0/cache/eslint-config-next-npm-12.2.3-8aa11ec9cd-bba70ac318.zip/node_modules/eslint-config-next/)

Require stack:
- /Users/sumit.goel/Development/monorepo/.yarn/__virtual__/eslint-config-next-virtual-c1b113f562/0/cache/eslint-config-next-npm-12.2.3-8aa11ec9cd-bba70ac318.zip/node_modules/eslint-config-next/parser.js
- /Users/sumit.goel/Development/monorepo/.yarn/cache/@eslint-eslintrc-npm-1.3.0-1f3c51be25-a1e734ad31.zip/node_modules/@eslint/eslintrc/dist/eslintrc.cjs

Expected Behavior

The next lint command is successful with no errors.

Link to reproduction

Please check the steps below to reproduce.

To Reproduce

$ mkdir monorepo && cd "$_"
$ yarn init -2 -p -w
$ yarn create next-app packages/web
$ yarn workspace web add next@canary
$ yarn workspace web run lint

[reck1ess]

// .yarnrc.yaml at project root 

packageExtensions:
  eslint-config-next@*:
    dependencies:
      next: "*"

yarnPath: .yarn/releases/yarn-3.2.2.cjs

[Stouffi]

eslint-config-next previously had next as peer dependency.

But this peer dependency has been removed with https://github.com/vercel/next.js/commit/f4fb3e0377909516b864d5c3114312745f124132

[sumitgoelpw]

Thank you so much @reck1ess It works.

I had to add react and react-dom as well to get rid of the warnings.

➤ YN0000: ┌ Resolution step
➤ YN0002: │ eslint-config-next@npm:12.2.3 [56903] doesn't provide react (p8e5fd), requested by next
➤ YN0002: │ eslint-config-next@npm:12.2.3 [56903] doesn't provide react-dom (p0ccb9), requested by next
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 2s 101ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: Done with warnings in 2s 267ms

packageExtensions:
  eslint-config-next@*:
    dependencies:
      next: "*"
      react: "*"
      react-dom: "*"

[unitof]

What would be the npm equivalent of packageExtensions?

[pyk]

For those who use pnpm, you can add the following config to your package.json root monorepo:

{
    "pnpm": {
        "packageExtensions": {
            "eslint-config-next@*": {
                "dependencies": {
                    "next": "*"
                }
            }
        }
    }
}

[nnennajohn]

For turbo pnpm repo, adding "next, react and react-dom" in devDependencies for eslint-config-custom fixed this.

[jferrettiboke]

I have also the same issue in projects using Yarn 1 when using a monorepo.

[Eyon42]

Confirmed that adding "next, react and react-dom" to devDependecies seems to work with yarn.

[jferrettiboke]

Adding next, react, and react-dom as devDependencies to the package.json at the root works. But I also have other apps using Expo and React Native and they are not happy having two different versions of React. Expo builds fail because of that. React Native doesn't play well when having a different React version in the root package.json.

What would be the right solution for Yarn 1? Does anyone know?

[Eyon42]

@jferrettiboke I also tried first with just adding next, but then when I went to run the next app it seems to be using the global package.jsonalso. And running won't work without ´react´and ´react-dom´

[tomskopek]

// .yarnrc.yaml at project root 

packageExtensions:
  eslint-config-next@*:
    dependencies:
      next: "*"

yarnPath: .yarn/releases/yarn-3.2.2.cjs

Oh my gosh, thank you so much @reck1ess 🏆

[pm0u]

The suggested .yarnrc.yaml addition does not fix it for me using yarn workspaces / Next 13.0.3

[yordis]

Make sure to run yarn install otherwise it will no work, the .pnp.cjs needs to be updated