React monorepo preset base configuration contains conflicting peer dependency

[Revinz]

Current Behavior

Creating a workspace with react-monorepo preset leads to "npm i" and future npm package installations to give a conflicting peer dependency error.

Expected Behavior

Ability to install new packages and generate node modules using npm install

GitHub Repo

No response

Steps to Reproduce

1. npx create-nx-workspace@latest test --preset=react-monorepo
2. Application name irrelevant
3. Bundler=Rspack
4. Testrunner=None
5. Stylesheet format=styled-components
6. CI=GitHub Actions
7. Navigate to workspace root
8. run npm install
9. Error: While resolving: [email protected]

Edit: Also occurs with Vite and Webpack as bundler. Both results in the same error, meaning this is a major issue as the preset do not work at all.

Nx Report

Node           : 18.16.0
OS             : win32-x64
Native Target  : x86_64-windows
npm            : 9.5.1

nx (global)        : 17.1.1
nx                 : 19.8.2
@nx/js             : 19.8.2
@nx/jest           : 19.8.2
@nx/linter         : 19.8.2
@nx/eslint         : 19.8.2
@nx/workspace      : 19.8.2
@nx/devkit         : 19.8.2
@nx/eslint-plugin  : 19.8.2
@nx/react          : 19.8.2
@nrwl/tao          : 19.8.2
@nx/web            : 19.8.2
typescript         : 5.5.4
---------------------------------------
Registered Plugins:
@nx/eslint/plugin
@nx/jest/plugin
---------------------------------------
Community plugins:
@nx/rspack : 19.8.0

Failure Logs

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^9.8.0" from the root project
npm ERR!   peer eslint@"^6.0.0 || ^7.0.0 || >=8.0.0" from @eslint-community/[email protected]
npm ERR!   node_modules/@eslint-community/eslint-utils
npm ERR!     @eslint-community/eslint-utils@"^4.4.0" from @typescript-eslint/[email protected]
npm ERR!     node_modules/@typescript-eslint/utils
npm ERR!       @typescript-eslint/utils@"^8.0.0" from @nx/[email protected]
npm ERR!       node_modules/@nx/eslint-plugin
npm ERR!         dev @nx/eslint-plugin@"19.8.2" from the root project
npm ERR!         1 more (@nrwl/eslint-plugin-nx)
npm ERR!       3 more (@typescript-eslint/eslint-plugin, ...)
npm ERR!     @eslint-community/eslint-utils@"^4.2.0" from [email protected]
npm ERR!   6 more (@nx/eslint, @typescript-eslint/eslint-plugin, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8" from [email protected]
npm ERR! node_modules/eslint-plugin-import
npm ERR!   dev eslint-plugin-import@"2.30.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8" from [email protected]
npm ERR!   node_modules/eslint-plugin-import
npm ERR!     dev eslint-plugin-import@"2.30.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

Related issue from eslint-plugin-import regarding eslint v9 support can be found here. Includes potential workaround that I have not tested: import-js/eslint-plugin-import#2948

The issue that have introduced this problem is most likely this one: #27451

[ziacik]

Also, @nx/[email protected] uses esbuild@~0.19.2 as peer dep
while @nx/[email protected] installs [email protected] which uses esbuild@^0.21.3 as dep,
bringing two sets of binaries to node_modules.

This is hell. :(

[jeff-edmondson-pci]

Seeing this as well. Is there any resolution?

[lundinmathias]

I ran into this as well while following the tutorial https://nx.dev/getting-started/tutorials/react-monorepo-tutorial. Used --legacy-peer-deps to be able to move on.

[Bullfrog1234]

So doing a bit of research I have found the following

Packages with support for ESLint v9

• [email protected]: added support for ESLint v9
• [email protected]: added support for ESLint V9
• [email protected]: added support for ESlint v9, however the library is now on v7.37.1

Packages without support for ESLint v9

eslint-plugin-react-hooks

The issue is eslint-plugin-react-hooks it has no support for v9 of ESLint. There is anan open issue (react#28313) which talks about the flat file nature of v9 and a PR react#30774 that add support for a flat configuration. This however does not include an updated peer dependencies for v9 in the package.

Temporary Solution

Add an override for eslint-plugin-react-hooks in package.json:

{
 "name": "@demo/source",
  "version": "0.0.0",
  "devDependencies":{
    "eslint": "^9.8.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "2.31.0",
    "eslint-plugin-jsx-a11y": "6.10.0",
    "eslint-plugin-react": "7.37.1",
    "eslint-plugin-react-hooks": "4.6.0",
  },
  "overrides": {
    "eslint-plugin-react-hooks": {
      "eslint": "^9.8.0"
    }
  }
}

[rteano]

Experiencing this issue as well even without using a preset, but by just adding the react-app via nx g @nx/react:app app --bundler=vite

Would it be safe to downgrade eslint instead?

[isaacplmann]

Should be resolved by #28267

[Bullfrog1234]

Should be resolved by #28267

@isaacplmann This does not fix all the peer dependency issues that are caused by the upgrade. Additionally, some of the plugins do not support v9 see above

[trumbitta]

I'm still having the issue with Nx 20.0.0

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/eslint
npm error   dev eslint@"^9.8.0" from the root project
npm error   peer eslint@"^6.0.0 || ^7.0.0 || >=8.0.0" from @eslint-community/[email protected]
npm error   node_modules/@eslint-community/eslint-utils
npm error     @eslint-community/eslint-utils@"^4.4.0" from @typescript-eslint/[email protected]
npm error     node_modules/@typescript-eslint/utils
npm error       @typescript-eslint/utils@"^8.0.0" from @nx/[email protected]
npm error       node_modules/@nx/eslint-plugin
npm error         dev @nx/eslint-plugin@"20.0.0" from the root project
npm error       3 more (@typescript-eslint/eslint-plugin, ...)
npm error     @eslint-community/eslint-utils@"^4.2.0" from [email protected]
npm error   8 more (@eslint/compat, @nx/eslint, ...)
npm error
npm error Could not resolve dependency:
npm error peer eslint@"^3 || ^4 || ^5 || ^6 || ^7 || ^8" from [email protected]
npm error node_modules/eslint-plugin-jsx-a11y
npm error   dev eslint-plugin-jsx-a11y@"6.7.1" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/eslint
npm error   peer eslint@"^3 || ^4 || ^5 || ^6 || ^7 || ^8" from [email protected]
npm error   node_modules/eslint-plugin-jsx-a11y
npm error     dev eslint-plugin-jsx-a11y@"6.7.1" from the root project
npm error

 NX   Report complete - copy this into the issue template

Node           : 20.17.0
OS             : darwin-arm64
Native Target  : aarch64-macos
npm            : 10.8.2

nx                 : 20.0.0
@nx/js             : 20.0.0
@nx/jest           : 20.0.0
@nx/eslint         : 20.0.0
@nx/workspace      : 20.0.0
@nx/devkit         : 20.0.0
@nx/eslint-plugin  : 20.0.0
@nx/react          : 20.0.0
@nx/rspack         : 20.0.0
@nx/web            : 20.0.0
typescript         : 5.5.4
---------------------------------------
Registered Plugins:
@nx/eslint/plugin
@nx/jest/plugin

[isaacplmann]

Can confirm the issue is happening in Nx 20. We're a little slow this week since the whole team is at Monorepo World.

@Bullfrog1234 's workaround should work for v20 as well.

[sacru2red]

eslint-plugin-react-hooks start to support eslint v9
https://github.com/facebook/react/releases/tag/eslint-plugin-react-hooks%405.0.0

I got errors with Nx Monorepo tutorial

resolve with npm install eslint-plugin-jsx-a11y@latest eslint-plugin-react-hooks@latest

[laszlo-ratesic]

@Bullfrog1234's workaround didn't fully solve it for me as I'm using the nextjs starter, but I had the same peer conflicting deps error. I was able to install packages with --legacy-peer-deps but ran into issues when trying to use shadcn/ui CLI so I needed something that would work without the flag.

I ended up changing my package.json's devDependencies and overrides to this

"devDependencies": {
    // other dependencies...
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "eslint": "8.56.0",
    "eslint-config-next": "14.2.3",
  },
  "overrides": {
    "eslint": "8.56.0",
    "@typescript-eslint/eslint-plugin": {
      "eslint": "8.56.0"
    },
    "@typescript-eslint/parser": {
      "eslint": "8.56.0"
    }
  }

Then I ran npm clean cache --force and then npm install and it worked like a charm for me.

[jaysoo]

You can manually update eslint-plugin-react-hooks and eslint-plugin-jsx-a11y to 5.0.0 and 6.10.1 respectively which will resolve the peer dep conflict.

We'll make the the versions are updated in Nx 20.1.