React项目中为何出现‘Module not found: Can't resolve’错误？

问题情况 #

我在React项目中碰到了Module not found: Can't resolve错误，相关代码和项目结构如下：

导入代码：

import React from "react";
import { HomeSVG, AboutSVG } from "../images/svg"

export const navLinks = [
   {
      id: "home",
      svg: <HomeSVG />,
      title: "首页",
   },
   {
      id: "about",
      svg: <AboutSVG />,
      title: "关于我们",
   },
];

SVG组件导出代码：

export const HomeSVG = () => {
return (
    <svg className="home-icon icon" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 114.45" imageRendering="optimizeQuality" fillRule="evenodd" clipRule="evenodd">
        <path fillRule="nonzero" d="M110.8..
    </svg>
)
}

项目文件结构：

• src
  • components（当前导入文件所在目录）
  • images
    • svg（存放SVG组件的文件夹）

排查方向和解决办法 #

1. 文件夹未配置统一导出 #

直接导入../images/svg文件夹时，React默认会加载该文件夹下的index.js文件。如果你的SVG组件是单独的文件（比如HomeSVG.jsx、AboutSVG.jsx），且svg文件夹里没有index.js统一导出这些组件，就会触发找不到模块的错误。

解决办法二选一：

• 直接导入具体组件文件：

  import { HomeSVG } from "../images/svg/HomeSVG";
  import { AboutSVG } from "../images/svg/AboutSVG";
  

• 在svg文件夹下新建index.js，统一导出所有SVG组件：

  // images/svg/index.js
  export { HomeSVG } from "./HomeSVG";
  export { AboutSVG } from "./AboutSVG";
  

  完成后原来的导入代码即可正常使用。

2. 文件扩展名缺失 #

如果SVG组件文件名没有添加.jsx或.js扩展名，而项目打包配置未设置自动识别无扩展名文件，也会导致该错误。

解决办法：

• 给组件文件名加上.jsx（React组件推荐使用该后缀），例如HomeSVG.jsx；
• 或者在项目的打包配置文件（webpack.config.js或vite.config.js）中添加扩展名解析规则，将.jsx纳入自动解析列表。

3. 大小写不匹配 #

Linux和macOS系统的文件系统区分大小写，若导入时写的是HomeSVG，但实际文件名是homesvg.jsx或homeSvg.jsx，就会找不到模块。

解决办法：

• 核对文件名与导入时的组件名，确保大小写完全一致。

4. 相对路径层级错误 #

检查当前导入文件所在目录与images文件夹的相对层级是否正确。比如当前文件在src/components/nav下，../images/svg是正确路径；若层级更深，则需要调整../的数量。

解决办法：

• 核对当前文件与目标文件夹的相对位置，调整路径中的../数量，确保指向正确的svg文件夹。

内容的提问来源于stack exchange，提问作者Surge