React Module not found: Error: Can't resolve- import paths

Question

I'm new to coding and I'm building a website with react. I keep getting these 3 errors:

ERROR in ./src/Components/Pages1/Home.js 6:0-50 Module not found: Error: Can't resolve './Components/Cards/Cards1.js' in 'C:\Users\Mady\rsd-web\src\Components\Pages1'

ERROR in ./src/Components/Pages1/ScheduleAppointment.js 5:0-42 Module not found: Error: Can't resolve './Components/SForm.js' in 'C:\Users\Mady\rsd-web\src\Components\Pages1'

ERROR in ./src/Components/Pages1/Services.js 4:0-19 Module not found: Error: Can't resolve './App.css' in 'C:\Users\Mady\rsd-web\src\Components\Pages1'

This is the code I have In those files:

Home.js:

import React from 'react'
import HeroSection from '../HeroSection'
import Cards1 from './Components/Cards/Cards1.js';


function Home(){
    return(
        <>
        <HeroSection> </HeroSection>
        <Cards1 />
        </>
    )
}

export default Home

Services.js:

import React from "react";
import './App.css'

function Services(){
    return(
        <>
        
        </>
    )
}

export default Services

ScheduleAppointment.js

import React from "react";
import SForm from './Components/SForm.js'


function ScheduleAppointment(){
    return(
        
        <SForm></SForm>
        
    )
}

export default ScheduleAppointment

And this is how the file structure is lay out

// Folder structure:
//    |-src
//        |-Components
//             |-Cards
                    |CardItem.js
                    |Cards.css
                    |Cards1.js
//             |-Pages1
                    |Home.js
                    |ScheduleAppointment.js
                    |Services.js
//             |-Button.css
               |-Button.js
               |-HeroSection.css
               |-HeroSection.js
               |-Navbar.css
               |-navbar.js
               |-SForm.js
//        |-App.css
//        |-App.js
          |-index.js

I'm sure it's something easy that I missed but I can't figure it out.

I've tried a couple of different ways to import them, name changes, killing and then restarting the port, deleting node-modules and reinstalling dependencies, nothing changes.

Answer 1

I think you're confused about what ./ means in the relative path.

It means "current directory" (from the perspective of the file). Imagine you're inside the Home.js file, in what directory is this file? Pages1. So ./ means Pages1 in this case.

Where is the file SForm.js? It's inside the Components folder. So ./ means Components.

Where is the file App.js? It's inside the src folder. So ./ means src.

Where is the file Cards1.js? It's inside the Cards folder. So ./ means Cards.

Now you need to understand ../. It means "go one level up". Imagine again you're inside Home.js file. We said this file is inside Pages1. So from here, how do you reach SForm.js? You need to "go one level up" with ../.

If you're working in the file ScheduleAppointment.js, how do you import SForm.js? Let's walk through this:

Where is ScheduleAppointment.js? It's in Pages1. Where is SForm.js? It's in Components. How many levels up is Components relative to Pages1? One level up. So you go one level up ../SForm.js. Note how you don't specify Components when you go one level up from Pages1, because ../ means Components from the perspective of SForm.js.

So from Home.js you import Cards.js like this: you go one level up from Pages1 ../, and you specify the rest of the path.

import Cards1 from '../Cards/Cards1.js';

From ScheduleAppointment.js you import SForm.js like this

import SForm from '../SForm.js'

What about importing App.css from Service.js? You need to go two levels up. So ../../.

import '../../App.css'