turbo: `with-react-native-web` example doesn't work

What version of Turborepo are you using?

latest

What package manager are you using / does the bug impact?

Yarn v1

What operating system are you using?

Mac

Describe the Bug

The with-react-native-web example doesn’t work.

Expected Behavior

The example should work in order for developers to learn and explore how things are wired up.

Furthermore, the example is using the exact same React v17.x version in both Next.js and Expo apps. In a real-world scenario, React versions between Next.js and Expo rarely match between them. Developers could struggle a lot just because of this.

Please, provide an up-to-date with-react-native-web example, keep Next.js and Expo running with the latest compatible dependency versions, and highlight and make developers aware of the solution to fix React incompatibility issues when there is more than one React version (which is pretty common when using Next.js and Expo in a monorepo setup).

To Reproduce

npx degit vercel/turborepo/examples/with-react-native-web with-react-native-web
cd with-react-native-web
yarn install
git init . && git add . && git commit -m "Init"
yarn dev

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 20 (6 by maintainers)

Most upvoted comments

Tried this out locally and saw a few issues (not sure which one is the actual problem)

apps/native’s dev script asks to instal expo-cli globally. Not sure if it’s waiting for user input to proceed or not (maybe a -y flag or some autoinstall script would help? or documentation should include a yarn global add expo-cli)
Some TS errors from react-native. The version is pinned, so I’m not sure how this could have broken on its own, but it’s complaining about TouchableOpacity component. Maybe we should simplify our example not to depend on _actual_components of ReactNative, since our examples are to show how Turbo works, not React native.

I’m not familiar with RN or Expo, so I didn’t go further than this at the moment

mehulkar on Sep 12, 2022

Thanks @butadpj, Now all platforms work properly. your configuration needs the "bundler": "metro", in the app.json file below the "web" key. The rest of things were settled up already.

I want to post a question on the StackOverflow and it would be a good log for the community.

amerllica on Sep 17, 2023

hey @amerllica, since you’re still getting the same error. Here’s the minimal example of turborepo with expo router. I’ve documented all the steps taken to setup expo-router. Hope you find it helpful!

butadpj on Sep 17, 2023

I can’t even install the packages from the root directory. I’m getting this error when I run npm install

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: native@1.0.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from native@1.0.0
npm ERR!   apps/native
npm ERR!     native@1.0.0
npm ERR!     node_modules/native
npm ERR!       workspace apps/native from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.2" from react-native@0.68.2
npm ERR! node_modules/react-native
npm ERR!   react-native@"0.68.2" from native@1.0.0
npm ERR!   apps/native
npm ERR!     native@1.0.0
npm ERR!     node_modules/native
npm ERR!       workspace apps/native 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.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/butadpj/.npm/_logs/2023-08-11T16_48_29_332Z-eresolve-report.txt

butadpj on Aug 11, 2023

The TS issue with TouchableOpacity I believe required the specific version of react types - we’ve had to fix it once here already: https://github.com/vercel/turbo/pull/2181/files

tknickman on Nov 7, 2022