So I'm trying to import files from the ./recipes folder but it keeps showing in the error that it can't find the module './recipes'

This is my App.js:

import React, { Component } from "react";

import Home from "./Screens/Home";
import { Ampalaya, AdobongSitaw } from "./recipes";



<NavigationContainer>
        <StatusBar style="auto" />
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={Home}
            options={{ headerShown: false }}
          />

          <Stack.Screen
            name="Ampalaya"
            component={Ampalaya}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />

          <Stack.Screen
            name="AdobongSitaw"
            component={AdobongSitaw}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />
</Stack.Navigator>
      </NavigationContainer>

Also all those files are existing on their perspective folder. Still can't find a solution. Here is my folder structure:

enter image description here

CodePudding user response：

Please try to import it as you are importing your Home Screen.

import Ampalaya from "./recipes/Ampalaya";
import AdobongSitaw from "./recipes/AdobongSitaw";

The only way you could achieve the way you are importing is to make a recipe module.

Create index.js in your recipes folder.

import all your components into the file.

export the module with all components.

//index.js
import Ampalaya from "./Ampalaya";
import AdobongSitaw from "./AdobongSitaw";

export { Ampalaya, AdobongSitaw };

Import the way you were doing it:

import { Ampalaya, AdobongSitaw } from "./recipes";