Keep getting "Unable to resolve module" in react native

Question

I am quite new to react-native. I am currently attempting to add a custom button. Whenever I try to import the file I have created (or any file that I myself have created) I keep getting this error I am unable to resolve. I have looked far and wide but I have not found any solution that works.

Relevant information: Npm Version: 6.14.13, React-Native version: 0.63.2, Expo Version: 4.5.2.

Project structure: https://i.sstatic.net/pZFlX.jpg

The error I get:

Unable to resolve module ./components/custombutton.js from C:\Users\levik\Desktop\App\App\App.js: 

None of these files exist:
  * components\custombutton.js(.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\custombutton.js\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)

Code in App.js

import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Dimensions } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as ScreenOrientation from 'expo-screen-orientation';
import { CustomButton } from "./components/custombutton.js";


const Stack = createStackNavigator();

export default function App() {
  ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
  return (
    <View  style={styles.container}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{
              headerStyle: {
                backgroundColor: '#1e1e1e',
              },
              headerTintColor: '#fff',
            }}
          />
          <Stack.Screen 
            name="Thing"
            component={Thing}
            options={{
              headerStyle: {
                backgroundColor: '#1e1e1e',
              },
              headerTintColor: '#fff',
            }}
          />
          <Stack.Screen 
            name="About"
            component={About}
            options={{
              headerStyle: {
                backgroundColor: '#1e1e1e',
              },
              headerTintColor: '#fff',
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}

const HomeScreen = ({ navigation }) => { //the homescreen
  navigation.addListener('focus', () => { //issue solver
    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
  });
  return (
    <View style={styles.container}>
      <Button title="Poker" onPress={() => navigation.navigate('Thing')} />
      <Button title="About" onPress={() => navigation.navigate('About')} />
    </View>
    
  );
}

const Thing = ({ navigation }) => { //looks like i have to use expo's API for setting it to landscape mode
  ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE); //works
  return (
    <View style={styles.container}>
      <Button title="Home" onPress={() => navigation.navigate('Home')} />
      <Button title="About" onPress={() => navigation.navigate('About')} />
    </View>
    
  );
}

const About = ({ navigation }) => { //the 
  ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT); //works
  
  return (
    <View style={styles.container}>
      <Button title="Home" onPress={() => navigation.navigate('Home')} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#1e1e1e',
  },
  title: {
    fontWeight: '700',
    fontSize: 40,
    color: 'white',
    paddingTop: 40,
    paddingLeft: 10,
  }
});

Code in custombutton.js:

import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Dimensions } from 'react-native';

export default function CustomButton() {
    return(
        <Text>this is text</Text>
    );
}

Things I have tried:

1. Take custombutton out of the components folder and change the the import line in App.js to both "./custombutton.js" and "./custombutton"
2. change the import to "./components/custombutton"
3. Run both "expo start -c" and "npm start --reset-cache"

Answer 1

I kept getting this error as long as I was just 'R' reloading. Rather than trying --reset-cache, I stopped the server and started over again. Module got resolved and it works.

Answer 2

You are exporting the CustomButton component as a default export. But on App.js, you are importing it as a named import. So, you should either do:

export function CustomButton() on custombutton.js

OR

import CustomButton from "./components/custombutton.js"; on App.js