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.

Answer 1

You can clean the cache on your bundler:

npm start --clean-cache

Answer 2

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.

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.

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

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.

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 !

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.