nx: @nrwl/next version resolution error

another temporary solution is to use overrides in your package.json

"overrides": {
    "next": "$next"
  },

@wolframm Using yarn is the same as running npm with legacy-peer-deps. The issue is that npm >= 7 does strict peer dependency checking, while yarn or npm <= 6 will only throw a warning. If you try to add an react native app and a react app in a fresh setup in yarn you will still see these warnings.

warning " > react-native@0.70.4" has incorrect peer dependency "react@18.1.0".
warning "react-native > metro-react-native-babel-transformer@0.72.1" has unmet peer dependency "@babel/core@*".
warning " > metro-react-native-babel-transformer@0.72.3" has unmet peer dependency "@babel/core@*".
warning " > metro-react-native-babel-preset@0.72.3" has unmet peer dependency "@babel/core@*".
warning "react-native > react-native-codegen > jscodeshift@0.13.1" has unmet peer dependency "@babel/preset-env@^7.1.6".
warning "babel-jest > babel-preset-jest@28.1.3" has unmet peer dependency "@babel/core@^7.0.0".
warning " > babel-jest@28.1.1" has unmet peer dependency "@babel/core@^7.8.0".

Because you are starting a fresh setup, the latest react native and latest react versions are not “compatible”. React native 0.70.4 has a peer dependency on react 8.1.0 but you’ve already installed the latest react 8.2.0. While it’s doubtful this specific case (8.1.0 - 8.2.0) will cause any issues, if the versions were say react 17 and react 18 you would probably run into issues.

This isn’t an nx issue, and in most cases it’s fine to ignore these unmet peer dependencies, but specifically in the case of expo/next.js/react/etc, you need to make sure that the react version is common between your projects. This will be mostly decided by the expo version since it lags behind react native releases which in turn lags behind react releases.

There is no straightforward to do this in the nx tooling, you’ll have to figure out which versions are compatible with each other yourself. Even if you were to use a package-based nx monorepo or something like lerna, while you wouldn’t see these errors/warnings much, you’ll still run into issues if you share components/ui between react-based apps if the react versions aren’t the same for these apps.

I recreated my workspace and apps/libs using Yarn instead of npm. This did not throw any errors and both my React and Expo apps start serving without issues.

SUGGESTED RESOLUTION

NX add a prominent statement in their docs emphasizing that devs should use Yarn on new integrated projects and also switch all code snippets to Yarn by default.

I ran another fresh setup and there are more dependency resolution issues with other official plugins.

npx create-nx-workspace@latest myorg --preset=ts;
cd myorg;
npm i --save-dev @nrwl/react;
npm i --save-dev @nrwl/react-native;
nx g @nrwl/react:app some-app;
npm i;

Throws:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @nrwl/react-native@15.0.4
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from the root project
npm ERR!   peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR!   node_modules/@testing-library/react
npm ERR!     dev @testing-library/react@"13.4.0" from the root project
npm ERR!   6 more (react-dom, react-router, react-router-dom, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-native@"^0.70.1" from @nrwl/react-native@15.0.4
npm ERR! node_modules/@nrwl/react-native
npm ERR!   dev @nrwl/react-native@"^15.0.4" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.1.0
npm ERR! node_modules/react
npm ERR!   peer react@"18.1.0" from react-native@0.70.4
npm ERR!   node_modules/react-native
npm ERR!     peer react-native@"^0.70.1" from @nrwl/react-native@15.0.4
npm ERR!     node_modules/@nrwl/react-native
npm ERR!       dev @nrwl/react-native@"^15.0.4" 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.

NX Report

Node : 16.17.1
   OS   : darwin x64
   npm  : 8.19.2
   
   nx : 15.0.4
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.0.4
   @nrwl/detox : 15.0.4
   @nrwl/devkit : 15.0.4
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.0.4
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.0.4
   @nrwl/js : 15.0.4
   @nrwl/linter : 15.0.4
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.0.4
   @nrwl/react-native : 15.0.4
   @nrwl/rollup : 15.0.4
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.0.4
   @nrwl/web : 15.0.4
   @nrwl/webpack : 15.0.4
   @nrwl/workspace : 15.0.4
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

I also have an Expo app in my repo and using these options breaks the Expo app. Official releases of plugins should never require using --force or --legacy-peer-deps.

That was kind of my point thank you for saying this! Of course you can force the dependencies but that’s not what I would like to do especially since the documentation for the release said it was supported officially