How do I fix "Unable to resolve module" in React Native or Expo?

A red screen that says Unable to resolve module stops everything, but it’s one of the more helpful errors you’ll get. It names both the missing module and the file that imported it, and those two names tell you which fix you need.

Why it happens

Expo and React Native apps are bundled with Metro, which works by following every import in your code to pack your JavaScript together. When an import doesn’t lead to a real file or an installed package, bundling stops. The message reads Unable to resolve module X from Y, where X is what you imported and Y is the file that imported it. For a package, it adds that X “could not be found within the project”, and for a file path it lists the file names that were tried under “None of these files exist”.

The causes to check are:

• a package that’s imported but not installed, for example after copying code from another project
• a path with a typo, or with different capitalization than the real file name
• a stale cache after you install packages or rename and move files
• a path alias like @/components/Header without a matching entry in tsconfig.json

How to fix it

1. Read the two names in the error. If the missing module looks like a package name (expo-image, @react-navigation/native), it’s a dependency problem. If it starts with ./, ../, or an alias, it’s a path problem.

2. For a package, install it with Expo’s installer, which picks a version that works with your SDK:

   npx expo install expo-image

3. For a path, check it from the importing file. The capitalization has to match exactly, because file names on macOS aren’t case-sensitive by default, so ./components/header can work on your computer and then fail on a build server running Linux, where Header.tsx and header.tsx are different files. If you renamed a file only by changing its case, Git may still have the old name.

4. For an alias, check tsconfig.json. Expo CLI reads path aliases from it automatically, so @/* needs an entry like "paths": { "@/*": ["src/*"] }. Restart the dev server after changing it.

5. Restart with a clear cache:

   npx expo start --clear

6. If that’s not enough, reset everything, using the sequence from Expo’s cache guide:

   rm -rf node_modules
   npm install
   watchman watch-del-all
   npx expo start --clear

How you know it’s fixed

The app bundles and the screen loads. To check that a cloud build will bundle too, we’d run npx expo export, which bundles your app the same way without the rest of the build.

If it still can’t be found

If it works on your computer but fails in an EAS build, the file may be listed in .gitignore, because ignored files aren’t uploaded to the build servers and the import then fails with “None of these files exist”. A capitalization mismatch causes the same split between local and cloud.

If the missing module is one you never imported yourself, such as something under @babel/runtime, a package you use needs it, so install that package in your project as well. And in a monorepo, look for old manual settings in metro.config.js. Since SDK 52, Metro is configured for monorepos automatically, and Expo’s guide says to delete watchFolders, resolver.nodeModulesPath, resolver.extraNodeModules, and resolver.disableHierarchicalLookup if you set them by hand, then start once with --clear.