React.js报错Module not found: Can't resolve模块找不到问题求助

问题核心原因 #

你当前的报错是相对路径引用错误：

• 你的MainTemplate.js文件本身就存放在/src/components/目录下
• 你在MainTemplate.js里写的导入语句import Categories from './components/Categories'，会被解析为查找/src/components/components/Categories.js路径，而你的Categories.js实际存放在/src/components/目录下，所以必然找不到。

修复方案 #

把MainTemplate.js里的Categories导入语句修改为：

import Categories from './Categories';

其他隐藏问题修复（不改后续还会触发报错） #

1. 组件导出大小写不一致：你在MainTemplate.js里定义的组件名是Maintemplate（t小写），但根组件导入的是MainTemplate（T大写），React对组件名大小写敏感，建议统一修改组件定义：

const MainTemplate = () => {
  // 原有逻辑保持不变
}
export default MainTemplate;

2. styled-components语法错误：你写的styled模板字符串里混用了React内联样式的写法，正确写法要去掉引号、逗号，改为CSS原生写法：

const CategoriesBlock = styled.div`
    display: flex;
    padding: 10px;
    flex-direction: row;
    margin: 0 auto;
`;

const Category = styled.div`
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;

    &:hover {
        color: #0bb286;
    }

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

内容的提问来源于stack exchange，提问作者박종준