无法在 React.js 中解决“找不到模块：无法解析：”答案

【问题标题】：Can't resolve "Module not found: Can't resolve : " in React.js无法在 React.js 中解决“找不到模块：无法解析：”
【发布时间】：2021-09-10 13:47:42
【问题描述】：

我不敢相信我在问一个明显的问题，但我仍然在控制台日志中收到错误。

控制台说它在目录中找不到模块，但我已经检查了至少 10 次拼写错误。无论如何，这是组件代码。

我想在根目录中渲染 MainTemplate

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

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

export default App;

这是 MainTemplate 组件

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;

这是类别组件

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;

我已经检查了至少 10 次模块位于此位置 ./src/components/MainTemplate。

然而，React 仍然抛出这个错误：

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

【问题讨论】：

文件夹结构是什么？
myapp/ node_modules/ package.json src/ components/MainTemplate.js components/Categories.js App.js index.js

标签： reactjs

【解决方案1】：

如果您的MainTemplate.js 位于./src/components/MainTemplate.js，而您的Categories.js 位于./src/components/Categories.js

那么你的导入语句应该是：import Categories from './Categories';

【讨论】：

你打败了我。

【解决方案2】：

看起来您是从 ./src/components' 导入，因此将导入更新为 import Categories from './Categories'，即从导入中删除 components。

【讨论】：