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: eslint-plugin-import@2.30.0

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: eslint-plugin-import@2.30.0
npm ERR! Found: eslint@9.11.1
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/eslint-utils@4.4.0
npm ERR!   node_modules/@eslint-community/eslint-utils
npm ERR!     @eslint-community/eslint-utils@"^4.4.0" from @typescript-eslint/utils@8.7.0
npm ERR!     node_modules/@typescript-eslint/utils
npm ERR!       @typescript-eslint/utils@"^8.0.0" from @nx/eslint-plugin@19.8.2
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 eslint@9.11.1
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 eslint-plugin-import@2.30.0
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: eslint@8.57.1
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8" from eslint-plugin-import@2.30.0
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/esbuild@19.8.2 uses esbuild@~0.19.2 as peer dep
while @nx/vite@19.8.2 installs vite@5.4.8 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?

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

• eslint-plugin-import@2.31.0: added support for ESLint v9
• eslint-plugin-jsx-a11y@6.10.0: added support for ESLint V9
• eslint-plugin-react@7.35.0: 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: eslint-plugin-jsx-a11y@6.7.1
npm error Found: eslint@9.12.0
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/eslint-utils@4.4.0
npm error   node_modules/@eslint-community/eslint-utils
npm error     @eslint-community/eslint-utils@"^4.4.0" from @typescript-eslint/utils@8.8.1
npm error     node_modules/@typescript-eslint/utils
npm error       @typescript-eslint/utils@"^8.0.0" from @nx/eslint-plugin@20.0.0
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 eslint@9.12.0
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 eslint-plugin-jsx-a11y@6.7.1
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: eslint@8.57.1
npm error node_modules/eslint
npm error   peer eslint@"^3 || ^4 || ^5 || ^6 || ^7 || ^8" from eslint-plugin-jsx-a11y@6.7.1
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