React Vite TypeScript导入SVG报错：无法找到模块*.svg?react

步骤1：修正Vite配置 #

确保你已在vite.config.ts中正确注册插件：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'

export default defineConfig({
  plugins: [react(), svgr()]
})

步骤2：修复类型声明文件 #

你在vite-env.d.ts中的triple-slash指令格式错误，正确写法为三个连续斜杠，修改后：

/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />

（注：原代码多余的空格导致TypeScript未识别类型声明）

步骤3：使用正确的导入方式 #

此时直接用?react后缀导入SVG组件即可，无需额外自定义类型：

import Logo from '../assets/mountain.svg?react'

// 组件使用示例
function App() {
  return <Logo />
}

关于自定义类型方式的报错原因 #

当你自定义*.svg类型声明时，未通过?react后缀触发插件转换，Vite会将SVG当作普通资源处理，因此不存在ReactComponent导出。如果一定要用命名导入，需修改插件配置：

// vite.config.ts
export default defineConfig({
  plugins: [
    react(),
    svgr({
      exportAsDefault: false, // 启用命名导出模式
    })
  ]
})

此时导入方式为：

import { ReactComponent as Logo } from '../assets/mountain.svg?react'

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