Webpack 5迁移报错：React.lazy动态导入出现call读取未定义属性问题

根因分析 #

Webpack 5默认开启usedExports: true（属于tree-shaking核心配置），它会扫描模块代码并标记未被使用的导出内容。当React.lazy加载的模块出现以下情况时，就会触发报错：

• 模块的默认导出被Webpack误标记为未使用，导致生成的chunk中默认导出变为undefined，React.lazy尝试调用该导出的call方法时抛出错误。
• 异步chunk的拆分规则混乱，导致动态导入的组件模块和依赖的node_modules代码之间出现依赖断裂，间接触发tree-shaking的误判。

你添加usedExports: false能修复，是因为关闭这个配置后，Webpack不会再分析导出的使用情况，默认导出能完整保留，自然不会出现undefined的问题。

修复方案 #

1. 修正splitChunks的异步缓存组配置 #

你的vendorsAsync缓存组没有指定chunks: 'async'，默认会处理所有类型的chunk，这可能导致异步加载的node_modules代码被拆分到错误的chunk中，引发依赖冲突。给它加上chunks: 'async'，确保异步chunk的依赖被正确拆分：

optimization: {
    moduleIds: 'deterministic',
    splitChunks: {
      automaticNameDelimiter: '~',
      name: false,
      cacheGroups: {
        vendorsInitial: {
          enforce: true,
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          name: 'vendorsInitial',
          chunks: (chunk) => !/^(admin|public)$/.test(chunk.name) && entryKeys.includes(chunk.name),
        },
        vendorsAsync: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'async', // 新增该行，仅处理异步chunk
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  };

2. 检查动态导入模块的导出与副作用声明 #

• 确保目标模块的默认导出明确，避免模糊的导出写法：

  // 正确的默认导出写法
  export default function TargetComponent() {
    // 组件逻辑
  }
  

• 如果模块包含副作用（比如全局样式、全局变量修改），在项目根目录的package.json中添加sideEffects声明，告诉Webpack不要tree-shake这些内容：

  {
    "sideEffects": ["client/component/path/*.css", "client/component/path/index.js"]
  }
  

  要是整个模块都有副作用，直接设置"sideEffects": true即可。

3. 针对性禁用单个模块的usedExports #

如果不想全局关闭usedExports，可以只给出问题的模块禁用该配置，兼顾tree-shaking和功能正常：

module.exports = {
  module: {
    rules: [
      {
        test: /client\/component\/path\/.*\.js$/, // 匹配出问题的模块路径
        optimizer: {
          usedExports: false,
        },
      },
    ],
  },
};

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