在Vite中使用react-inlinesvg报错：Cannot convert object to primitive value

问题出在Vite中用require导入SVG的返回值类型上：Vite里require导入资源会返回一个包含资源元信息的对象，而react-inlinesvg的src属性需要的是原始的URL字符串或者SVG内容，对象无法被解析成原始值，所以触发了Cannot convert object to primitive value错误。

以下是两种可行的解决方法：

方法一：使用ES模块静态导入 #

直接通过ES模块语法导入对应主题的SVG，Vite会自动将其处理为资源URL：

import logoLight from '../../../assets/icons/icon/logo_light_full.svg';
import logoDark from '../../../assets/icons/icon/logo_dark_full.svg';

// 根据themeProp切换对应的SVG URL
<SVG src={themeProp === 'light' ? logoLight : logoDark} />

方法二：使用动态批量导入（适配多主题场景） #

如果主题数量较多，可通过Vite的import.meta.glob批量导入所有相关SVG，再动态获取对应URL：

import { useState, useEffect } from 'react';
import SVG from 'react-inlinesvg';

// 批量导入所有logo主题SVG，指定导出为URL
const logoAssets = import.meta.glob(
  '../../../assets/icons/icon/logo_*_full.svg',
  { as: 'url', eager: false }
);

function YourComponent({ themeProp }) {
  const [logoUrl, setLogoUrl] = useState('');

  useEffect(() => {
    // 拼接当前主题对应的SVG路径
    const assetPath = `../../../assets/icons/icon/logo_${themeProp}_full.svg`;
    // 获取对应资源的异步导入函数并执行
    if (logoAssets[assetPath]) {
      logoAssets[assetPath]().then(url => setLogoUrl(url));
    }
  }, [themeProp]);

  return <SVG src={logoUrl} />;
}

补充说明 #

即便你添加了CommonJS插件，Vite对资源导入的处理逻辑也和Webpack不同——Webpack中require导入SVG默认返回URL，但Vite里require返回的是模块对象。如果非要用require，可以尝试取对象的default属性（不推荐，ES模块语法更符合Vite的设计）：

<SVG src={require(`../../../assets/icons/icon/logo_${themeProp}_full.svg`).default} />

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