Encountering an error in React Native when executing: npm run reset-project

Other Questions NPM
1

I am currently working on an Expo project and encountered an issue when I execute the command npm run reset-project, which results in a 500 error in my application. This error is linked to a file named missing-screen.tsx. In this file, I have the following code:

import { StyleSheet } from 'react-native';
import { CustomText } from '@/components/CustomText';
import { CustomView } from '@/components/CustomView';

export default function MissingScreen() {
 return (
   <>
     <Stack.Screen options={{ title: 'Error!' }} />
     <CustomView style={styles.container}> 
       <CustomText type="header">This screen is unavailable.</CustomText>
       <Link href="/" style={styles.link}>
         <CustomText type="link">Return to the main screen!</CustomText>
       </Link>
     </CustomView>
   </>
 );
}

In the section where I have return (<>, I receive a suggestion from VS to include import React from 'react'. However, this leads to two additional errors regarding these imports:

import { CustomText } from '@/components/CustomText';
import { CustomView } from '@/components/CustomView';

I resolved the second import issue using ChatGPT by changing the path to '../components/CustomView';. Now, when I want to import images, I must use source={require('@/image-path.jpg')}. Can anyone clarify what’s happening here? Please note, I have only been working with React for three months, so I’d appreciate straightforward explanations.

2

hey emma, make sure the aliases like ‘@/components’ are correctly set in your babel config or tsconfig for Typescript. Sometimes imports break if these configs are missing or incorrect. also remember to restart the dev server after fixing configs, it might solve the errors youre seeing. good luck!