如何解决React项目中“Module not found: Can't resolve './undraw_Upload_image_re_svxx'”错误？

我来帮你搞定这个SVG导入出错的问题～首先看你遇到的「Module not found」错误，核心原因是导入时没指定SVG文件的后缀，或者没有用正确的方式处理SVG资源，下面给你几个实用的解决方案：

1. 最直接的修复：补上SVG文件后缀 #

React项目里（准确说是webpack打包工具）默认不会自动识别.svg后缀，所以你只需要把导入语句补上.svg就行：

import Illustration from "./undraw_Upload_image_re_svxx.svg";

然后在img标签里正常使用就没问题了：

<img src={Illustration} alt="上传插图" />

这个方法最简单，只要你的SVG文件确实和App.js在同一个/src目录下，马上就能解决模块找不到的问题。

2. 更优雅的方式：把SVG当成React组件用 #

如果觉得用img标签不够灵活（比如想修改SVG的颜色、尺寸，或者给它加交互），可以把SVG转换成React组件来使用，有两种省心的方式：

方式一：利用create-react-app内置支持（无需额外配置） #

如果你是用create-react-app创建的项目，它已经内置了@svgr/webpack工具，可以直接把SVG导入成React组件：

// 注意这里的写法：用ReactComponent别名导入
import { ReactComponent as Illustration } from "./undraw_Upload_image_re_svxx.svg";

然后直接把它当成组件用就行，还能通过props控制样式：

<Illustration style={{ fill: "#2563eb", width: "300px" }} />

这种方式不用复制粘贴SVG代码，还能灵活修改样式，非常推荐！

方式二：手动封装成组件（适合自定义需求多的场景） #

如果你的项目不是create-react-app，或者想更深度自定义SVG，可以把SVG代码复制到一个单独的组件文件里，比如UploadIllustration.jsx：

// src/UploadIllustration.jsx
export default function UploadIllustration({ className, style }) {
  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      width="200" 
      height="200" 
      viewBox="0 0 200 200"
      className={className}
      style={style}
    >
      {/* 这里粘贴你的SVG原始代码 */}
    </svg>
  );
}

然后在App.js里导入使用：

import UploadIllustration from "./UploadIllustration";

function App() {
  return (
    <div>
      <UploadIllustration style={{ fill: "teal", width: "250px" }} />
    </div>
  );
}

这种方式你可以完全控制SVG的所有属性，适合需要频繁修改样式的场景。

3. 可选：配置webpack自动识别SVG后缀（不推荐） #

如果你实在不想每次都写.svg后缀，可以修改webpack的配置（create-react-app需要先eject或者用craco修改），在resolve.extensions里添加.svg：

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.svg'], // 把.svg加进去
  },
};

不过这个方法我不太推荐，因为省略后缀可能会导致文件命名冲突，代码可读性也不如明确写后缀好。

总结一下，最省心的是「补上后缀用img标签」或者「用create-react-app的组件导入方式」，既简单又能满足大部分需求～

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