Search code examples
javascriptandroidreactjsreact-nativecomponents

Unable to resolve module "./path_to_file"


I am new to React Native and I'm trying to make a little app. I followed a tutorial on how to start a CRNA project and how to test it on your phone. It worked but as soon as I created my first component, I got this error :

Building JavaScript bundle: error

Unable to resolve module ./Components/Search from C:\Users\fredd\OneDrive\Bureau\ReactNative\MoviesAndMe\App.js: 

None of these files exist:
  * Components\Search(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * Components\Search\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  1 | import React from 'react';
> 2 | import Search from './Components/Search';
    |                     ^
  3 |
  4 | export default class App extends React.Component {
  5 |   render() {

I am a complete beginner so maybe I missed something but I am certain I did the same thing as the tutorial.

Here's my files :

App.js

import React from 'react';
import Search from './Components/Search';

export default class App extends React.Component {
  render() {
    return (
      <Search/>
    );
  }
}

search.js (the component)

import React from "react";
import {View, Button, TextInput} from 'react-native';

class Search extends React.Component {
    render() {
        return (
            <View>
                <TextInput placeholder="Titre du film"/>
                <Button title="Rechercher" onPress={() => {}}/>
            </View>
        )
    }
}

export default Search;

Could you help me please ?


Solution

  • As your search.js is lowercase you need to import it like this import Search from './Components/search';