Unable to Resolve Module in React Native App

C

31

69

I'm getting an error in React Native saying it can't resolve a module. It's saying a certain folder doesn't exist but the path isn't accurate. It is telling me that Directory /Users/user/Desktop/RNApp/app/app/containers doesn't exists. I have no idea where that second app is coming from in the path though. My directory looks like this

This is how I am exporting my container components in app/containers/index.js

export RNAppNavigator from './Navigator/RNAppNavigator'
export SplashContainer from './Splash/SplashContainer'
export AppContainer from './App/AppContainer'

So I should be able to import them like import {AppContainer} from '~/containers correct? I don't get an issue with any other components. Just the AppContainer.

Thanks!

Codicodices answered 5/12, 2016 at 23:9 Comment(3)

Once I made a file called Index.js but imported index.js. Hello Case-sensitive-imports, my old friend. – Snout 8/1, 2021 at 13:31

Hi , this was 2016 but i have same error, if you know answer pls help. – Lichtenfeld 17/1, 2022 at 23:58

Hi, this is 2023 and I have same error, is there anyway to fix this WITHOUT restarting the Metro? When I restart Metro everything is fine, but this take too much time, everytime I create new screen I have to restart it. – Chuddar 25/2, 2023 at 7:6

C

197

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

Codicodices answered 8/12, 2016 at 21:50 Comment(4)

This throws - ERROR Metro Bundler can't listen on port 8081 – Excruciation 22/12, 2019 at 6:33

perhaps you kept your emulator open – Organotherapy 21/7, 2021 at 10:41

@sandeeptalabathula that issue is due to metro running in some terminal, close it and it will work. – Pushy 6/9, 2022 at 13:48

Hi, this is 2023 and I have same error, is there anyway to fix this WITHOUT restarting the Metro? When I restart Metro everything is fine, but this take too much time, everytime I create new screen I have to restart it. – Chuddar 25/2, 2023 at 7:18

L

24

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

Laticialaticiferous answered 24/12, 2018 at 19:24 Comment(6)

I wouldn't even use my components because I was using .jsx, does that mean React Native does not support jsx files? – Cannabis 22/6, 2019 at 0:27

Yes, I believe React native doesn't have support to JSX files. – Laticialaticiferous 22/6, 2019 at 17:32

Just to clarify, I am using Expo, I think it's Expo that does not support .jsx files, I wouldn't know with the pure native approach though. – Cannabis 22/6, 2019 at 23:14

@GilbertR., I built an app with pure React Native, and it doesn't support .jsx files too. You can check it here – Laticialaticiferous 23/6, 2019 at 0:36

i had TSX and jsx in expo , later I ejected , every thing worked with jsx and tsx extension apart from one custom import that was in jsx (was working in expo), stopped working in bare flow, thanks to your answer, I renamed the file and worked like a charm – Meenen 24/4, 2020 at 10:52

I can't understand why .jsx won't be valid file extension for a react-native filename. – Unprejudiced 17/9, 2020 at 15:5

W

16

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!

Weimer answered 22/3, 2018 at 14:27 Comment(0)

C

7

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

Chapland answered 19/6, 2022 at 6:38 Comment(2)

It works for me like a charm. In the above steps, I think rm -rf ${TMPDIR:-/tmp}/metro-* command removes the metro cache and it solves the issue. +1 – Feaze 4/1, 2023 at 17:21

this is the only one that worked for me. I only needed rm -rf ${TMPDIR:-/tmp}/metro-* – Keratoid 6/3 at 6:19

T

6

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.

Thermophone answered 31/12, 2018 at 17:28 Comment(0)

B

4

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';

Bryophyte answered 6/12, 2016 at 4:0 Comment(9)

Ok. I'll give it a try when I get home. i vaguely remember running into something like that a while back. I'll give it a shot. Thanks! – Codicodices 6/12, 2016 at 14:18

Unfortunately this did not work. It just gives me another error. This time though it is saying a directory that actually exists doesn't exist lol. It is saying Directory /Users/user/Desktop/RNApp/app/App/AppContainer doesn't exist when it clearly does. I'm absolutely stumped. – Codicodices 7/12, 2016 at 3:41

@staxwell In which file you are actually importing the AppContainer? Since you are saying export is done in app/containers/index.js. – Bryophyte 7/12, 2016 at 3:46

exporting is done in app/containers/index.js importing is done in app/index.js – Codicodices 7/12, 2016 at 3:48

@staxwell Oh, can you try this: import { AppContainer } from './containers/index'; – Bryophyte 7/12, 2016 at 4:16

Didn't work :( I'm betting there is a typo somewhere but I've been over it about a hundred times and haven't spotted anything. – Codicodices 7/12, 2016 at 4:21

@staxwell Hmm, would you mind post the source for AppContainer.js? – Bryophyte 7/12, 2016 at 4:25

The code is up here :) github.com/MaxwellGover/react-native-pomodoro/tree/master/app/… – Codicodices 7/12, 2016 at 4:27

@staxwell Thanks. Can you change how you export the AppContainer to export { default as AppContainer } from './App/AppContainer'; in app/containers/index.js. Then, import it using import { AppContainer } from './containers/index'; in app/index.js. – Bryophyte 7/12, 2016 at 7:38

P

2

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

Post answered 17/10, 2018 at 8:57 Comment(0)

I

2

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

Irwinirwinn answered 21/12, 2018 at 5:0 Comment(1)

React-native does automatic linking from 0.60 version onwards. – Altricial 10/8, 2019 at 5:55

E

2

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';

Elizabetelizabeth answered 20/4, 2019 at 6:52 Comment(0)

C

2

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.

Counts answered 21/1, 2021 at 18:56 Comment(0)

T

1

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.

Their answered 15/1, 2018 at 18:30 Comment(0)

D

1

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

Debose answered 6/10, 2020 at 6:59 Comment(0)

V

1

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

Vincenzovincible answered 7/1, 2021 at 2:15 Comment(0)

F

1

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

Fulgurite answered 16/2, 2021 at 9:0 Comment(3)

Hi! Try to add some more explaination to your solution – Disdain 16/2, 2021 at 9:19

I get zsh: no matches found: /tmp/metro-bundler-cache-* did it change? – Stempien 22/8, 2021 at 5:52

Metro Bundler cache can now be found here: rm -rf ${TMPDIR:-/tmp}/metro-*. Source: facebook.github.io/metro/docs/troubleshooting – Windtight 3/5, 2022 at 12:48

S

1

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

Example:

npm cache add [email protected]

Strega answered 16/5, 2021 at 13:11 Comment(0)

W

1

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

npm install

Hopefully this fixed it.

Weisbart answered 1/7, 2022 at 22:7 Comment(0)

N

1

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.

Nickinickie answered 9/8, 2022 at 8:30 Comment(0)

U

0

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'.

Urbanna answered 5/12, 2016 at 23:41 Comment(15)

In my /app/index.js file I import {AppContainer} from '~/containers. When I try ./containers I get another error saying another directory doesn't exist somewhere else. – Codicodices 5/12, 2016 at 23:56

It says it can't resolve module ./containers when I try that. – Codicodices 6/12, 2016 at 0:2

Not sure then, in AppContainer you're doing export default and not just export right? Other than that, try to rebuild your app on xcode and see if the errors go away. – Urbanna 6/12, 2016 at 0:6

Yeah and I've already tried rebuilding. Hm. I'll figure it out and I'll let you know what I find out. Thanks again!! – Codicodices 6/12, 2016 at 0:8

np, can you post a ss of your app/index.js? – Urbanna 6/12, 2016 at 0:11

I've updated the question with app/index.js screen shot. – Codicodices 6/12, 2016 at 0:20

it sets the root as app? because I remember seeing an error that it's looking for app/app/containers – Urbanna 6/12, 2016 at 0:31

~/containers would tells babel-root-import to start at the /app folder and then look in containers folder. The rootPathSuffix in .babelrc specifies which folder is the root. – Codicodices 6/12, 2016 at 0:31

and if you use ./containers, what error did it give? – Urbanna 6/12, 2016 at 0:33

It says it's unable to resolve module ./containers from Navigator/RNAppNavigator.js Directory /Users/User/Desktop/RNApp/app/containers/Navigator/containers doesn't exist. I'm just getting all these weird paths. – Codicodices 6/12, 2016 at 0:38

yea...no clue why it's going into Navigator folder to look for containers. – Urbanna 6/12, 2016 at 0:42

when you run your package manager try 'react-native start --root' – Urbanna 6/12, 2016 at 0:47

Ok I'll give it a shot in a few hours. Will this command launch the simulator as well? I know that react-native run-ios does. I feel like I have run the start command before but it didn't launch the simulator. – Codicodices 7/12, 2016 at 13:44

No, but it will start up the packager for you. I think there's an issue with using RN and that library you're using for filepaths. – Urbanna 7/12, 2016 at 16:2

OK. I might just go back to the default way of importing. Not worth the headache. – Codicodices 7/12, 2016 at 16:3

A

0

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'

Archiplasm answered 27/11, 2019 at 17:1 Comment(0)

S

0

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.

Substantiate answered 3/7, 2020 at 18:39 Comment(0)

C

0

Deleting the node folder and restarting works for me(run npm install after restarting)

Chifley answered 7/7, 2020 at 16:17 Comment(0)

V

0

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.

Valetudinarian answered 6/8, 2020 at 18:37 Comment(0)

L

0

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.

Laban answered 26/1, 2021 at 17:10 Comment(0)

R

0

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.

Reichert answered 7/11, 2021 at 11:30 Comment(0)

R

0

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,

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

import Card from "../components/Card";
Also i didn't write export default app; this line.

Rieger answered 19/1, 2022 at 10:16 Comment(1)

@Lichtenfeld Check whether my answer helps – Rieger 19/1, 2022 at 10:19

S

0

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.

Seethe answered 26/12, 2022 at 16:29 Comment(0)

H

0

For those who might be seeing this issue on their cicd pipelines but not on their locals. Check to see if you adjusted the casing for your file/directory names. Git didn't pick up the file renames for me.

This answer helped me fix my issue: https://mcmap.net/q/45668/-how-do-you-change-the-capitalization-of-filenames-in-git

Hydrofoil answered 31/8, 2023 at 17:11 Comment(0)

B

0

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,
        },
      }),
    },
  };
};

Baksheesh answered 18/2 at 3:19 Comment(0)

A

0

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"

Abscissa answered 7/6 at 9:47 Comment(0)

S

-1

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

Strega answered 16/5, 2021 at 13:49 Comment(0)

I

-2

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

Ingurgitate answered 17/4, 2017 at 1:8 Comment(1)

Where should that line be? – Homoousian 27/6, 2017 at 15:1

Recommended topics

Hot tags