React生产构建报错：TypeError: Cannot read 'getStackAddendum' of undefined

错误根源分析 #

这个错误本质是生产构建包中意外混入了开发环境的React热刷新（React Refresh）代码。getStackAddendum是React Refresh用于生成调试栈信息的函数，仅在开发环境存在，生产构建时应该被完全移除。

你的列过滤逻辑本身不是直接诱因，但它触发了React的JSX校验逻辑（生产环境本该被禁用），而这个校验逻辑调用了仅存在于开发环境的getStackAddendum函数，最终导致报错。结合你的技术栈（craco + Module Federation），大概率是craco的生产构建配置没有正确禁用React Refresh插件，或是Module Federation的模块共享配置导致开发代码泄漏到生产包中。

具体解决方案 #

1. 修正craco生产构建配置，禁用React Refresh #

在craco.config.js中明确区分开发/生产环境，确保生产环境移除React Refresh相关插件：

module.exports = {
  webpack: {
    configure: (webpackConfig, { env }) => {
      if (env === 'production') {
        // 移除React Refresh插件
        webpackConfig.plugins = webpackConfig.plugins.filter(
          plugin => !plugin.constructor.name.includes('ReactRefresh')
        );
        // 强制React使用生产版本
        webpackConfig.resolve.alias['react$'] = 'react/cjs/react.production.min.js';
        webpackConfig.resolve.alias['react-dom$'] = 'react-dom/cjs/react-dom.production.min.js';
      }
      return webpackConfig;
    },
  },
};

2. 加固列过滤逻辑的类型与空值处理 #

生产环境的代码压缩/编译可能放大潜在的类型问题，建议做以下优化：

• 给列接口添加明确的可选字段定义：

export interface IDataTableColumn {
  checkAdminRole?: boolean;
  checkLeaderRole?: boolean;
  // 其他列字段
}

export interface IDataTableHeaderProps {
  columns: IDataTableColumn[];
  isAdmin: boolean;
  isLeader: boolean;
  // 其他props
}

• 在组件中添加兜底默认值并简化过滤逻辑：

export const DataTableHeader = (props: IDataTableHeaderProps) => {
  const { columns = [], isAdmin, isLeader } = props;

  const filteredColumns = columns.filter(column => {
    const { checkAdminRole = false, checkLeaderRole = false } = column;
    return (!checkAdminRole || isAdmin) && (!checkLeaderRole || isLeader);
  });

  // ... 原有渲染逻辑
};

3. 清理构建缓存并重新构建 #

执行以下命令彻底清理缓存后重新构建：

rm -rf node_modules/.cache
npm run build

4. 验证Module Federation共享配置 #

确保Module Federation的shared配置中，React和React DOM指向生产版本：

// Module Federation配置片段
shared: {
  react: {
    singleton: true,
    requiredVersion: '^18.2.0',
    import: 'react',
  },
  'react-dom': {
    singleton: true,
    requiredVersion: '^18.2.0',
    import: 'react-dom',
  },
},

为什么开发环境正常？ #

开发环境中React Refresh是热刷新的必要工具，相关函数存在，所以即使触发相同的校验逻辑也不会报错。而生产环境本该移除这些代码，但配置错误导致残留，才会出现undefined调用的问题。

内容的提问来源于stack exchange，提问作者Jan Michálek