Can't resolve "Module not found: Can't resolve : " in React.js

Question

I can't believe that I'm asking an obvious question, but I still get the error in console log.

Console says that it can't find the module in the directory, but I've checked at least 10 times for typos. Anyways, here's the component code.

I want to render MainTemplate in root

import React from 'react';
import MainTemplate from './components/MainTemplate';

const App = () => {
    
    return (
       <MainTemplate></MainTemplate>
    );
}

export default App;

This is the MainTemplate component

import React from 'react';
import Categories from './components/Categories';

const Maintemplate = () => {
    const MainTemplate = {
        display: 'flex',
        
    };

    const HeaderTemplate = {
        backgroundColor: '#0bb286',
        color: '#fff',
        fontSize: '32px',
        padding: '20px',
        width: '100%',
    };

    const CrawlTemplate = {
        backgroundColor: '#eeeeee',
        width: '750px',
        height: '1050px',
        margin: '80px',
        padding: '40px',
        fontSize: '30px',
        textAlign: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        alignItems: 'flex-start',
        justifyContent: 'space-between',
        flex: '1',
        marginTop: '60px',
    };

    const TutoringTemplate = {
        backgroundColor: '#eeeeee',
        width: '750px',
        height: '1050px',
        margin: '80px',
        padding: '40px',
        fontSize: '30px',
        textAlign: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        flex: '1',
        marginTop: '60px',
    };

    const GroupStudyTemplate = {
        backgroundColor: '#eeeeee',
        width: '750px',
        height: '1050px',
        margin: '80px',
        padding: '40px',
        fontSize: '30px',
        textAlign: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        flex: '1',
        marginTop: '60px',
    };
    
    const footerTemplate = {
        backgroundColor: '#0bb286',
        color: '#fff',
        fontSize: '32px',
        textAlign : "center",
        padding: '20px',
        width: '100%',
    }

    return (
        <div>
            <div className="HeaderTemplate" style={HeaderTemplate}>
                튜터링/학습공동체 및 비교과활동 모음 사이트
            </div>
            <div className="MainTemplate" style={MainTemplate}>
                <div className="CrawlTemplate" style={CrawlTemplate}>
                    <Categories/>
                </div>
                <div className="TutoringTemplate" style={TutoringTemplate}>
                    튜터링 활동신청 part
                </div>
                <div className="GroupStudyTemplate" style={GroupStudyTemplate}>
                    학습공동체 활동신청 part
                </div>
            </div>
            <div className="footerTemplate" style={footerTemplate}>
                박종준 @copy & right
            </div>
        </div>
    );
};

export default Maintemplate;

This is the Categories component

import React from 'react';
import styled from 'styled-components';

const categories = [
    {
        name: 'All',
        text: '전체'
    },
    {
        name: 'Bachelor',
        text: '학사'
    },
    {
        name: 'Scholarship',
        text: '장학'
    },
    {
        name: 'Learning/Counseling',
        text: '학습/상담'
    },
    {
        name: 'Getjob',
        text: '취창업'
    }
];

const CategoriesBlock = styled.div`
    display: "flex",
    padding: "10px",
    flexDirection : "row",
    margin: "0 auto"
`;

const Category = styled.div`
    fontSize : "16px",
    cursor : "pointer",
    textDecoration: 'none'

    & : hover = {
        color : #0bb286;
    }

    & + & {
    margin-left : 10px;
    }
`;

const Categories = () => {
    
    return (
        <CategoriesBlock>
            {categories.map(c => (
                <Category key={c.name}>{c.text}</Category>
            ))}
        </CategoriesBlock>
    );
}

export default Categories;

I've checked at least 10 times that the module is at this location ./src/components/MainTemplate.

Yet, React still throws this error:

./src/components/MainTemplate.js
Module not found: Can't resolve './components/Categories' in '/workspace/web_platform_test/myapp/src/components'

Answer 1

Looks like you're importing from ./src/components' so update the import to import Categories from './Categories', i.e. remove components from your import.

Answer 2

if your MainTemplate.js is located at ./src/components/MainTemplate.js, and your Categories.js is located at ./src/components/Categories.js

Then your import statement should be: import Categories from './Categories';