@nrwl/next version resolution error

Current Behavior

NPM throws resolution error for @nrwl/next versions when installing any other package.

Expected Behavior

I expect that officially supported plugins do not mess up dependency resolution.

Steps to Reproduce

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

Failure Logs

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @nrwl/next@15.0.4
npm ERR! Found: next@13.0.0
npm ERR! node_modules/next
npm ERR!   next@"13.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^12.1.0" from @nrwl/next@15.0.4
npm ERR! node_modules/@nrwl/next
npm ERR!   dev @nrwl/next@"^15.0.4" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: next@12.3.1
npm ERR! node_modules/next
npm ERR!   peer next@"^12.1.0" from @nrwl/next@15.0.4
npm ERR!   node_modules/@nrwl/next
npm ERR!     dev @nrwl/next@"^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.

Environment (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 : Not Found
   @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 : 15.0.4
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : 15.0.4
   @nrwl/react : 15.0.4
   @nrwl/react-native : Not Found
   @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:

[ckaeslin]

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

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

[Gabrola]

@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.