I'm using TurboRepo to build a monorepo and the react-native-web example for kicking off full example of expo react-native-web.
I want to install expo-router
but I can't implement it properly within the native
project. I read the docs of the expo-router
significantly. If I add index.js
file in the root of the native
project and write import 'expo-router/entry
inside it, I would get this error:
Web Bundling failed 787ms
error: index.js: The "id" argument must be of type string. Received undefined
If I remove the index.js
file and add the entry file inside the package.json
file by using the main
key, (Like the docs said) I would get this error:
Error: Unable to resolve module ./node_modules/expo-router/entry from /Users/amerllica/WebstormProjects/mini-market-app/apps/_e_customer/.:
None of these files exist:
* node_modules/expo-router/entry(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs)
* node_modules/expo-router/entry/index(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs)
at ModuleResolver.resolveDependency (/Users/amerllica/WebstormProjects/mini-market-app/apps/_e_customer/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:114:15)
at DependencyGraph.resolveDependency (/Users/amerllica/WebstormProjects/mini-market-app/apps/_e_customer/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
at /Users/amerllica/WebstormProjects/mini-market-app/apps/_e_customer/node_modules/metro/src/lib/transformHelpers.js:169:21
at Server._resolveRelativePath (/Users/amerllica/WebstormProjects/mini-market-app/apps/_e_customer/node_modules/metro/src/Server.js:1045:12)
at async Server.requestProcessor [as _processBundleRequest] (/Users/amerllica/WebstormProjects/mini-market-app/apps/_e_customer/node_modules/metro/src/Server.js:449:37)
at async Server._processRequest (/Users/amerllica/WebstormProjects/mini-market-app/apps/_e_customer/node_modules/metro/src/Server.js:383:7)
Weird: The native
project alongside expo-router
works properly individually outside of the mono repo.
Goal: Clean install of expo-router
to have run on Android, iOS and web.
npx create-turbo@latest -e with-react-native-web
from Turborepo & React Native StarterWe have to make sure that there's no problem on dependencies before we install and add expo-router
yarn workspace
(it could be whatever you want)~49.0.7
. Then, re-install dependencies again from the project's rootsudo npx expo install --check
, then fix the dependenciesexpo-router
👇Run npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler
Re-install dependencies again from project's root
Remove index.js
's content and replace it with import "expo-router/entry";
. See working with monorepos guide
Set "scheme": "turborepo-with-expo-router"
in app.json
(Replace the schema with whatever you like)
Add plugins: ["expo-router/babel"],
in babel.config.js
Enable developing for web by adding the ff. in app.json
"web": {
"bundler": "metro",
},
Create .env
file and add EXPO_USE_METRO_WORKSPACE_ROOT=1
Finally, remove App.tsx
and start creating the first page in /app