Unable to Resolve Module in React Native App

Question

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

In my case I needed to import using an extended file path i e  WRONG  import MyComponent from  quot componentFolder myComponent quot   RIGHT  import MyComponent from  quot    myAppFolder componentFolder myComponent quot   Both of these showed no Typescript errors  but only the bottom one worked

User · Answer

Hardware -  Erase all content and settings did the job for me  other things didn t

User · Answer

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 - gt  Menu js use terminal to do a manual rename after the pull  mv menu js Menu js

User · Answer

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

User · Answer

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

User · Answer

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    lt Bar gt     lt  Bar gt  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[react-native] Unable to Resolve Module in React Native App

Examples related to react-native