Versel TurboRepo has got a conflict with expo router installation

Question

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.

Answer 1

Assuming you have started your project with npx create-turbo@latest -e with-react-native-web from Turborepo & React Native Starter

We have to make sure that there's no problem on dependencies before we install and add expo-router

• Select yarn workspace (it could be whatever you want)
• Update expo version to ~49.0.7. Then, re-install dependencies again from the project's root
• Run sudo npx expo install --check, then fix the dependencies
• At this point, the project can be successfuly run without any errors. We can now proceed and add expo-router

---

Used this expo-router docs as a guide

• 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