Cannot resolve peer dependency 'react' (or 'react-native)

[zanerichard]

Hi all,
After cloning the repo and installing with yarn I tried to simply launch the Android app using yarn android:start.
However, the app launches with an error (see below).

My assumption is that this has to do with the nature of peer dependencies in the app package.
If I remove the react import from .../packages/app/src/App.tsx the same error occurs with react-native.

Somehow, the bundler does not use the react/react-native packages provided in the node_modules of the mobile package.
Did I forget to do something or is this a bug?

I am using yarn 1.22.18

error: Error: Unable to resolve module react from C:\Users\Username\Git\react-native-universal-monorepo\packages\app\src\App.tsx: react could not be found within the project or in these directories:
  ..\app\node_modules
  ..\..\node_modules

If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*

1 | import React from "react";
  |                    ^
2 | import {
3 |   Image,
4 |   ImageSourcePropType,
    at ModuleResolver.resolveDependency (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:129:15)
    at DependencyGraph.resolveDependency (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\node-haste\DependencyGraph.js:288:43)
    at Object.resolve (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\lib\transformHelpers.js:129:24)
    at resolve (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:33)
    at C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:412:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:411:33)
    at processModule (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:140:31)
    at async addDependency (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:230:18)
    at async Promise.all (index 0)

[flexbox]

Hey @zanerichard

I was running —more or less— with the same issue as you

react-native-universal-monorepo git:master*
❯ yarn next:start
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

info  - Using external babel configuration from /Users/cerebra/workspace/react-native-universal-monorepo/packages/next/babel.config.js
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
error - ../../node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:22:0
Module not found: Can't resolve 'react'

Solution

1. I migrated to yarn berry with yarn set version berry
2. setup a .yarnrc.yml with

nodeLinker: node-modules
nmHoistingLimits: workspaces

3. re run the install

Now it's working 👏 for the web app

❯ yarn next:start
yarn run v1.23.0-20220130.1630
$ yarn workspace @my-app/next dev
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

info  - Using external babel configuration from /Users/cerebra/workspace/react-native-universal-monorepo/packages/next/babel.config.js
event - compiled successfully

Maybe your issue is related to your yarn config on your machine?

[flexbox]

🤔 In fact I double-checked this morning and it's not working with yarn berry

here is the version that I use

❯ yarn --version
1.23.0-20220130.1630

[ovidiu-balau]

Hi all, After cloning the repo and installing with yarn I tried to simply launch the Android app using yarn android:start. However, the app launches with an error (see below).

My assumption is that this has to do with the nature of peer dependencies in the app package. If I remove the react import from .../packages/app/src/App.tsx the same error occurs with react-native.

Somehow, the bundler does not use the react/react-native packages provided in the node_modules of the mobile package. Did I forget to do something or is this a bug?

I am using yarn 1.22.18

error: Error: Unable to resolve module react from C:\Users\Username\Git\react-native-universal-monorepo\packages\app\src\App.tsx: react could not be found within the project or in these directories:
  ..\app\node_modules
  ..\..\node_modules

If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*

1 | import React from "react";
  |                    ^
2 | import {
3 |   Image,
4 |   ImageSourcePropType,
    at ModuleResolver.resolveDependency (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:129:15)
    at DependencyGraph.resolveDependency (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\node-haste\DependencyGraph.js:288:43)
    at Object.resolve (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\lib\transformHelpers.js:129:24)
    at resolve (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:33)
    at C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:412:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:411:33)
    at processModule (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:140:31)
    at async addDependency (C:\Users\Username\Git\react-native-universal-monorepo\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:230:18)
    at async Promise.all (index 0)

Did you manage to fix this?

[flexbox]

@ovidiu-balau
yes!

If you have issues with /mobile build I encourage you to install https://github.com/pmadruga/react-native-clean-project#readme

[leon0399]

I've just faced the same issue with /windows
Only cloned this repo without even any editing