React native :Unable to resolve module Indeed, none of these files exist:

Question

I'm following this medium article to use FloatingTitleTextInputField in my react-native project

below is my project structure

Here is my code for HomeScreen.js

import React, {Component} from 'react';
import {Text, View, TextInput, StyleSheet} from 'react-native';
import FloatingTitleTextInputField from './customComponents/floating_title_text_input_field';



export default class HomeScreen extends Component {
  render() {
    return (
      // <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      //   <Text>My First React App</Text>
      //   <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} />
      // </View>

      <View style={styles.container}>
        <View style={styles.container}>
          <Text style={styles.headerText}>Its Amazing</Text>
          <FloatingTitleTextInputField
            attrName="firstName"
            title="First Name"
            value={this.state.firstName}
            updateMasterState={this._updateMasterState}
          />
          <FloatingTitleTextInputField
            attrName="lastName"
            title="Last Name"
            value={this.state.lastName}
            updateMasterState={this._updateMasterState}
          />
        </View>
      </View>
    );
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 65,
    backgroundColor: 'white',
  },
  labelInput: {
    color: '#673AB7',
  },
  formInput: {
    borderBottomWidth: 1.5,
    marginLeft: 20,
    borderColor: '#333',
  },
  input: {
    borderWidth: 0,
  },
});

When i try to use FloatingTitleTextInputField inside HomeScreen.js I'm getting below error

    error Unable to resolve module `./floating_title_text_input_field` from `React Native/AwesomeProject/screens/

HomeScreen.js`: The module `./floating_title_text_input_field` could not be found from `/React Native/AwesomeProject/screens/HomeScreen.js`. Indeed, none of these files exist:


  * `/React Native/AwesomeProject/screens/floating_title_text_input_field(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`


  * `/React Native/AwesomeProject/screens/floating_title_text_input_field/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`. Run CLI with --verbose flag for more details.


Error: Unable to resolve module `./floating_title_text_input_field` from `React Native/AwesomeProject/screens/HomeScreen.js`: The module `./floating_title_text_input_field` could not be found from `/React Native/AwesomeProject/screens/HomeScreen.js`. Indeed, none of these files exist:

Can anybody help me to solve this issue

If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

Pantile

try this import import FloatingTitleTextInputField from '../customComponents/floating_title_text_input_field'; – Audiovisual

@bk7 thanks for the quick reply let me check – Pantile

Answer 1

You're referencing it from the HomeScreen component which is in the screens directory. Because you're using the local ./ path, it's trying to find it in screens/customComponents. Using ../customComponents/floating_title_text_input_field should fix it.

Rickets

Thanks i have tried using import FloatingTitleTextInputField from '../customComponents/FloatingTitleTextInputField'; but still getting same error – Pantile

Sorry, I had miswritten the file to be camel case. I've corrected above – Rickets

@Pantile FWIW, rather than use relative paths I usually reference items from the project root, as in myprojectname/customComponents/floating_title_text_input_field. Best of luck – Rickets

Wild I had the same problem in expo. I renamed my file from someCamel to SomeCamel and VS code was fine with imports '../someCamel', even expo react native web was okay with it but Ios was not. Thanks, I was driving myself nuts b/c I would I have never checked the file name since the others were working fine. – Mallorymallow

Answer 2

You can clean the cache on your bundler:

npm start --clean-cache

Tetrapod

My import file path name was correct. And this solution worked for me – Scummy

I don't know why but this also works for me, you need to stop the metro builder and then run this command. – Norvun

You saved my time. My path and component everything was correct but somehow was getting module not found error. – Angulation

Answer 3

Even though your mistake was using the wrong path during the require statement, I think it might be useful to share how I solved this issue, where file import path wasn't the reason for the error. I encountered this issue after I added some image assets and required them in my components. But I forgot to build the app again. After several attempts, this is the solution that worked for me.

1. Stop your development server.
2. Install the app on your android device or emulator, using yarn android/ios.
3. Start the development server using yarn start.

Slovene

Answer 4

For me, it was due to an automatic import that had a capital letter wrong.

import {HomeScreen} from './screens/HomeScreen';

import {HomeScreen} from './screens/homeScreen';

Capitalist

Answer 5

The FloatingTitleTextInputField component seems a named export. So import it like import { FloatingTitleTextInputField } from 'the source'.

Or simply default export the FloatingTitleTextInputField like export default class FloatingTitleTextInputField in the floating_title_text_input_field.js file.

Goop

Answer 6

I might be a little late to the Party but if someone is still looking for this issue and hasn't found the solution and is using Expo just make sure if the component you're getting the error from has the

import { StatusBar } from 'expo-status-bar';

return (
<View>
...Some Code
<StatusBar style="auto" />
<View>
)

in the return statement for some reason removing this import from the return block will break your code !

Tawnatawney

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Sauers

Answer 7

In my case, I was using ts files, but VSCode imported the file as *.js instead of *.ts. I overlooked it. Changing the import from *.js to *.ts fixed the issue for me.

Recumbent

Answer 8

SOLVED: In my case, I forgot to add the .js at the end of the name of my component.

Adding that fixed for me.

Coloquintida