Unable to Resolve Module in React Native App

react-native start --reset-cache solved the issue. https://github.com/facebook/react-native/issues/1924

If you are having similar issues with pure components or classes, ensure you are using .js extension instead of .jsx.

I was losing the will to live over this error, RN telling me that an imported file ./Foo did not exist when it was right there!

The actual underlying error was not a typo but actually in another file that ./Foo imported.

Be careful. If you are writing JSX anywhere (eg. in ./Bar):

<Bar>...</Bar>

then you must have:

import * as React from 'react' (or similar)

present in that file (./Bar).

When the syntactic sugar (angled brackets) is transpiled it naively spits out something like:

React.createComponent(...)

And if React has not explicitly been imported this reference will be invalid, so the evaluation of this dependent file subsequently fails.

Unfortunately the result is that consequently ./Foo (as well as ./Bar) will be unavailable in your app, and thus RN says unhelpful things like module not found and Indeed, none of these files exist.

Hope that helps.

ps. you can also experience similar misery if you have circular dependencies between files! Such fun!

I had the same problem, I fixed that by below steps:

1-> delete node_modules by: rm -rf node_modules

2-> delte Pods folder inside ios folder: cd ios rm -rf Pods

3-> clear metro bunder: rm -rf ${TMPDIR:-/tmp}/metro-*

4-> reset cache npx react-native start --reset-cache

Now install node_modules and pods by below commands

1-> npm install

2-> cd ios

3-> pod install

4-> npx react-native run-ios

This work for me, Thanks

For me, using expo, I just had to restart expo. ctrl + c and yarn start or expo start and the run on ios simulator or your device, whichever you're testing with.

Based on your folder structure, try import like this in index.js:

import { AppContainer } from './App/AppContainer';

If you are using a named export, that is if you are doing:

export class AppContainer [...]

If you are using a default export, such as:

export default class AppContainer [...]

The object destructuring will fail. You have to do instead:

import AppContainer from './App/AppContainer';

I was able to solve this issue by adding a file extension '.js'. I was using Intellij and created a js file, but it did not have the file extension. When I did a refractor rename and changed my component from 'List' to 'List.js' react native then knew how to resolve it.

Hardware -> Erase all content and settings did the job for me (other things didn't).

Make sure the module is defined in the package.json use npm install and then try react-native link

If your file path is correct then check any one file contains

import React from './node_modules/react';

replace it with

import React, { Component } from 'react';

I also faced the same issue, now it is resolved. If you are facing issues with pure components or classes, make sure that you are using .js extension instead of .jsx.

If you recently had a name change in git that only includes changing the case of file. MacOS will ignore the change. So, you will have to go to the file in console and change the name. for example if name change is menu.js -> Menu.js use terminal to do a manual rename after the pull.

mv menu.js Menu.js

I'm using react-native CLI and I just restart rn-cli, ctrl+c to stop the process then npx react-native start

1. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-*
2. react-native start --reset-cache

using this worked for me npm cache add <package name><@version>.

Example:

npm cache add [email protected]

If none of these worked for you try deleting your ‘node_modules’ folder, then run:

npm install

Hopefully this fixed it.

Unable to solve module 'module-name' is realated to the node modules packages and sometime you would need to clean the node_modules folder and reset the application. For beginners this would do the trick.

npm install

or

yarn install

Delete your node modules and reinstall if shows further errors.

Remember yarn and npm although its basically the same, they have yarn.lock and package-json.lock files, So also depends on the project.

See the image of error log

Here is the Answer of quations : "Module "62" is missing from the asset registry" in react-native and react-native-web

Run this command in your terminal: "yarn expo install --fix"

This is my project directory structure

And i use the import like this

And it is working do not forget to add dot before slash for example './src/container/home/profile/index'

reload the app and the cause of this error is the changes of files location made in react-native dependency which other libraries like native-base point to.

To solve it you need to view the mentioned file and change the file location to the correct location.

In my case I needed to import using an extended file path

i.e:

WRONG: import MyComponent from "componentFolder/myComponent";

RIGHT: import MyComponent from "../myAppFolder/componentFolder/myComponent";

Both of these showed no Typescript errors, but only the bottom one worked.

It looks like your error is coming from the outer index.js file, not this one. Are you importing this one as './app/containers'? because it should just be './containers'.

I had this error and then I realized that my package.json file was mostly empty. Make sure you have all the dependencies you have first.

use yarn add DEPENDENCY_NAME to add dependencies.

In react native .jsx is different file than .js. That's why I was getting this error. I was trying to import Comp.jsx when I needed to name the file Comp.js.

In my case I got error like below,

App.js (0:1)
Unable to resolve module 'module://../components/Card.js'
(Device)
  Evaluating module://../components/Card.js
  Evaluating module://App.js.js
  Loading module://App.js

I cleared the above error,

1. by checking the app.js import lines. File location was wrong. I made error in below line,

   import Card from "../components/Card";

2. Also i didn't write export default app; this line.

I had the error and in my case i simply installed the module at the wrong location (i wasn't using the Terminal at the root of my project).

Check your package.json, if you don't see the name of the referenced module in the list, that's probably your problem too.

I was having a different reason. Documenting it for others below.

I started to get this error, the moment I added metro.config.js to my app. I copied the contents from a tutorial as below:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const {getDefaultConfig} = require('metro-config');

module.exports = async () => {
  const {
    resolver: {assetExts, sourceExts},
  } = await getDefaultConfig();
  return {
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
  };
};

But, I had to do the following changes to make it work:

• change the require path to expo/metro-config from just metro-config
• change the getDefaultConfig() call to getDefaultConfig(__dirname)
• extend existing configs, instead of overriding them

Here is the updated metro.config.js that worked for me:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const {getDefaultConfig} = require('expo/metro-config');

module.exports = async () => {
  const defaultConfig = await getDefaultConfig(__dirname);
  const {
    resolver: {assetExts, sourceExts},
  } = defaultConfig;
  
  return {
    ...defaultConfig,
    resolver: {
      ...defaultConfig.resolver,
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
    transformer: {
      ...defaultConfig.transformer,
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
  };
};

Using this worked for me npm cache add package name@version example: npm cache add [email protected]

I had the exact same problem — fix was babel-preset-react-native-stage-0, instead of babel-preset-react-native.