Search code examples
javascriptreactjsexporeact-native-webexpo-router

Versel TurboRepo has got a conflict with expo router installation

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.

Solution

  • 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