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


    Used this expo-router docs as a guide