Storybook集成后导致现有Nextjs/React应用SVG图片加载异常

该问题的核心是Storybook默认的webpack规则会处理SVG资源，启用了esModule: true配置，导致引入SVG返回的是模块对象而非资源路径，和你Next.js配置里的SVG loader行为冲突。

方案1：覆盖Storybook的webpack规则（对应「强制Next侧配置优先级更高」需求） #

直接在Storybook的配置文件（通常是.storybook/main.js或.storybook/main.ts）里修改webpack配置，先排除Storybook默认对SVG的处理，再套用你Next.js里的SVG loader配置即可：

// .storybook/main.js
module.exports = {
  // 其他原有配置...
  webpackFinal: async (config) => {
    // 第一步：移除Storybook默认的SVG处理规则
    config.module.rules = config.module.rules.map(rule => {
      if (rule.test.toString().includes('svg')) {
        return { ...rule, exclude: /\.svg$/i }
      }
      return rule
    })

    // 第二步：添加你在next.config.js中使用的SVG loader配置，和Next侧配置完全保持一致即可
    config.module.rules.push({
      test: /\.svg$/i,
      // 以下为常用的@svgr/webpack+url-loader组合示例，可替换为你自己的配置
      use: [
        {
          loader: '@svgr/webpack',
          options: { icon: true }
        },
        {
          loader: 'url-loader',
          options: {
            esModule: false, // 关键配置：关闭ES模块导出，即可解决[object Module]问题
          }
        }
      ]
    })

    return config
  }
}

该方案会让自定义的SVG处理规则优先级高于Storybook默认规则，完全复用Next侧的配置逻辑，不需要修改原有Next.js的任何配置。

方案2：完全隔离两者的webpack配置（对应「配置完全隔离」需求） #

你可以给Storybook单独指定独立的webpack配置文件，完全脱离Next.js的配置体系：

1. 新建.storybook/webpack.config.js，写入你需要的完整webpack配置，不需要和Next.js的配置做任何关联
2. 在.storybook/main.js中指定使用这个独立配置：

// .storybook/main.js
const customWebpackConfig = require('./webpack.config')

module.exports = {
  // 其他原有配置...
  webpackFinal: async (config) => {
    return { ...config, ...customWebpackConfig }
  }
}

如果不需要复用Next的任何构建逻辑，该方案可以完全避免两者的配置冲突。

针对仅SVG异常的快速修复 #

如果只有SVG加载有问题，你可以直接在Storybook的webpack配置里给静态资源loader全局关闭esModule即可，不需要修改其他规则：

// .storybook/main.js
module.exports = {
  webpackFinal: async (config) => {
    config.module.rules.forEach(rule => {
      if (rule.test.toString().match(/(svg|png|jpe?g|gif)/)) {
        rule.use.forEach(use => {
          if (use.loader.includes('url-loader') || use.loader.includes('file-loader')) {
            use.options.esModule = false
          }
        })
      }
    })
    return config
  }
}

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