在Rails 6与Shakapacker 7中配置@svgr/webpack加载SVG为React组件报错求助

核心原因 #

这个错误说明你的SVG文件被Webpack处理成了静态资源URL，而非转换为React组件，本质是@svgr/webpack的loader配置未正确生效，Shakapacker v7的默认资源处理规则覆盖了SVG的组件转换逻辑。

具体修复步骤 #

1. 修正Shakapacker的Webpack配置 #

在config/webpack/webpack.config.js中，确保@svgr/webpack的loader优先级高于默认资源处理规则，添加或修改配置如下：

const { webpackConfig, merge } = require('shakapacker')

const customConfig = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/, // 仅对React/JSX文件中导入的SVG生效
        use: ['@svgr/webpack'],
      },
      // 若需同时支持CSS等场景下的静态资源导入，可添加以下规则区分
      // {
      //   test: /\.svg$/i,
      //   issuer: /\.[css]$/,
      //   type: 'asset/resource',
      // },
    ],
  },
}

module.exports = merge(webpackConfig, customConfig)

2. 确认依赖安装 #

确保已安装与Shakapacker v7兼容的@svgr/webpack版本（v6及以上均可）：

npm install @svgr/webpack --save-dev
# 或使用yarn
yarn add @svgr/webpack --dev

3. 检查组件导入方式 #

确保导入语法正确，直接将SVG作为组件导入使用：

// 正确写法
import MySvg from '../images/my-svg.svg'

// 组件内使用
function App() {
  return <MySvg />
}

避免将导入的SVG当作静态资源URL使用（比如<img src={MySvg} />），这会和组件转换逻辑冲突。

4. 清理缓存并重启服务 #

Shakapacker可能缓存了旧的编译规则，执行以下命令清理后重启服务：

rails assets:clobber
# 重启开发服务
bin/dev

5. 兼容两种导入场景（可选） #

如果需要同时支持React组件和静态资源URL两种导入方式，可通过oneOf区分不同场景：

module: {
  rules: [
    {
      test: /\.svg$/i,
      oneOf: [
        {
          issuer: /\.[jt]sx?$/,
          use: ['@svgr/webpack'],
        },
        {
          type: 'asset/resource',
        },
      ],
    },
  ],
}

这样JSX中导入的SVG会转为组件，CSS或其他文件中导入的则会生成资源URL。

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