运行gatsby develop提示String contains an invalid character错误如何解决

报错根本原因 #

你遇到的报错核心是Gatsby默认没有配置将SVG文件解析为React组件的webpack规则。你之前WSL环境能正常运行，大概率是本地依赖有缓存、或本地存在未提交到Git仓库的SVG解析配置，克隆仓库后配置/依赖丢失，webpack直接将SVG的XML内容当成普通字符串塞入JS代码，自然触发「字符串包含无效字符」的报错。
你手动将SVG转为JSX格式的JS文件后能正常运行，本质是绕开了SVG解析的步骤，转换后的文件本身就是合法JSX语法，可以被webpack直接解析，但这种方式维护成本很高，每次修改SVG都要重新转换。

无需转换SVG的正规解决方案 #

方案1：使用官方SVG组件解析插件（适合需要动态修改SVG属性的场景） #

使用Gatsby生态的gatsby-plugin-svgr插件，可以直接将SVG作为React组件导入使用，无需手动转换格式。
操作步骤：

1. 安装依赖

npm install @svgr/webpack gatsby-plugin-svgr
# 或使用yarn/pnpm对应安装命令

2. 在gatsby-config.js中添加插件配置，为了避免和普通SVG静态资源引用冲突，建议配置对应的解析规则：

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-svgr",
      options: {
        svgoConfig: {
          plugins: [
            {
              name: "preset-default",
              params: {
                overrides: {
                  // 保留SVG的viewBox属性，避免缩放异常
                  removeViewBox: false
                }
              }
            }
          ]
        }
      }
    }
  ]
}

3. 修改导入方式即可正常使用，原有props无需调整：

import { ReactComponent as FrontEnd } from "../images/svgs/front-end_sm.svg";

<FrontEnd className="svg inline-svg svg-icon" />

方案2：直接作为静态资源引入（适合不需要动态修改SVG内部属性的场景） #

如果你不需要动态修改SVG的fill、stroke等内部属性，直接将SVG作为普通图片用img标签引入即可，无需额外插件：

import frontEndSvg from "../images/svgs/front-end_sm.svg";

<img src={frontEndSvg} alt="Desarrollo Front End" className="svg inline-svg svg-icon" />

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