expo: Web Bundling failed. Unable to resolve "expo-router/entry" from "index.ts"

another option to use pnpm:

• create .npmrc in your project root
• add node-linker=hoisted to the file and save it
• delete your pnpm-lock.yaml and node_modules, run pnpm install again

same issue w/ pnpm create expo-app --template navigaition ts option

works fine with yarn and npx

React Native is a popular framework for building mobile applications using JavaScript. It allows developers to write code once and deploy it on multiple platforms, such as iOS and Android. On the other hand, pnpm is a package manager for JavaScript projects that aims to provide faster installation and better disk space utilization compared to other package managers like npm or Yarn.

While React Native and pnpm can be used together in a project, there have been reported compatibility issues between React Native’s build process and pnpm. These issues stem from the fact that React Native heavily relies on native modules and requires a specific project structure and dependency resolution.

Here are a few reasons why React Native may not work seamlessly with pnpm:

1. Native modules: React Native relies on native modules written in Java (for Android) and Objective-C/Swift (for iOS). These native modules often have their own dependencies and may require specific configurations. Some native modules may not be fully compatible with pnpm’s resolution algorithm, which can lead to build errors or runtime issues.

2. Project structure: React Native expects a specific project structure, including the “node_modules” directory at the root of the project. However, pnpm uses a different approach to manage dependencies, which may result in inconsistencies with React Native’s expectations. This can cause issues during the build process or when bundling assets.

3. Tooling integration: React Native has a well-defined tooling ecosystem, including its own CLI (Command Line Interface) and build scripts. These tools are designed to work with npm or Yarn by default, and their integration with pnpm may not be as seamless. This can lead to compatibility issues or the need for additional configuration.

While it’s possible to use React Native with pnpm by configuring the project and build processes accordingly, it may require additional effort and troubleshooting to overcome any compatibility issues that arise. It’s important to consider the specific needs of your project and evaluate the trade-offs before deciding to use pnpm with React Native.

this is what helped me:

https://github.com/t3-oss/create-t3-turbo/issues/741#issuecomment-1812454342

Works as expected. Thank you. For those who are still not sure how to do it:

1. change the ‘main’ property inside of expo app package.json from from: "main": "expo-router/entry", to: "main": "index.js",
2. add needed index.js file next to the package.json file. In my case I created apps/expo/index.js file .
3. inside of the index.js file I added just 1 line:

import 'expo-router/entry'

1. save all files and restart the expo:android server

This should work as it did in my case.

https://github.com/t3-oss/create-t3-turbo/issues/741#issuecomment-1812454342

I was also trying to resolve

I did set my Node Version onto 16.10 After looking here: https://expo.github.io/router/docs/ I’ve ran: npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

Please let me know if it helped you

Leaving this hear in case anyone else is stuck at the same error but without any clear help: npx expo install --check fixed things up for me

Edit: this fixed it for me

    config.resolver.unstable_enablePackageExports = true;

    config.resolver.sourceExts.unshift("mjs");

Adding mjs will accept files using esm and package exports will enable the react-native exports field in package.json.

outra opção para usar o pnpm:

• crie .npmrcna raiz do seu projeto
• adicione node-linker=hoistedao arquivo e salve-o
• exclua seu pnpm-lock.yamle node_modules, execute pnpm installnovamente

não entendi

One super-tricky reason this happens: if you name your repo the same name as a node_module Metro is trying to import.

I’ve named my example apps expo or expo-router a few times, and I get this mysterious error that it can’t find a dependency. Metro seems to do a lookup at the root directory for some reason if it matches a dependency name.

I am still receiving this error for web bundler… I am trying to use effector and effector-react… the problem was first occurring for effector-react… simply removed it, then the problem became for effector… so it had to be the bundler I guess?

Web Bundling failed ....ms Unable to resolve "effector-react" from "...."

Web Bundling failed ....ms Unable to resolve "effector" from "...."

RN is fine - the apps work well - its just the web

I was also trying to resolve

I did set my Node Version onto 16.10 After looking here: https://expo.github.io/router/docs/ I’ve ran: npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

Please let me know if it helped you

Thank you. This worked for me!

i get this error: Android Bundling failed 11284ms Unable to resolve “./effects” from “node_modules@expo\metro-runtime\build\index.js”

I tried reinstalling expo-router, then I got

Unable to resolve “react-native-safe-area-context” from “node_modules\expo-router\src\ExpoRoot.tsx”

while using the with-typescript template.