webpack配置source-map结合storybook时控制台报错链接指向bundle而非源码模块

核心原因列表 #

• Storybook独立webpack配置未继承项目配置
  Storybook运行时使用独立的webpack构建流程，项目根目录下的webpack配置默认不会同步到Storybook的构建规则中，仅项目层面配置devtool: "source-map"不会生效，需要单独为Storybook配置devtool规则。
• 生产环境Storybook默认关闭source map
  如果使用build-storybook构建生产版本预览，Storybook默认会在生产构建时禁用source map减少产物体积，即使配置了devtool也会被Terser压缩插件的默认配置覆盖，需要手动开启压缩阶段的source map生成。
• JSX源码位置标识未开启
  若Babel配置中未启用@babel/plugin-transform-react-jsx-source插件，React运行时无法获取DataGridComponent对应的源码位置信息，错误栈会直接指向编译后的bundle代码位置，该插件在Create React App等脚手架中默认仅在开发环境开启。
• source map资源加载异常
  如果webpack的output.publicPath配置错误，或者构建后的.map文件与bundle文件的相对路径不匹配，浏览器无法正常加载source map资源，会直接回退显示编译后的bundle位置。若配置的是hidden-source-map类型的devtool，bundle文件不会携带source map地址注释，也会导致浏览器无法识别映射关系。

快速修复示例 #

在.storybook/main.js中显式配置webpack的devtool规则：

module.exports = {
  // 其余storybook配置保持不变
  webpackFinal: async (config) => {
    // 统一设置source map规则
    config.devtool = 'source-map';
    // 生产环境开启压缩插件的source map支持
    if (process.env.NODE_ENV === 'production') {
      config.optimization?.minimizer?.forEach(plugin => {
        if (plugin.constructor.name === 'TerserPlugin') {
          plugin.options.sourceMap = true;
        }
      })
    }
    return config;
  }
}

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