配置webpack-subresource-integrity时报Cannot read property 'tap' of undefined错误

错误原因 #

• 配置代码中直接全量覆盖了config.output对象，删除了react-scripts内置的webpack输出配置中除crossOriginLoading外的所有属性，导致webpack-subresource-integrity插件运行时无法读取所需的配置项和钩子，触发Cannot read property 'tap' of undefined报错。
• 若修改配置后仍报错，大概率是webpack-subresource-integrity版本和项目中react-scripts内置的webpack版本不匹配。react-scripts 4.x及以下版本内置webpack 4，仅支持1.x版本的webpack-subresource-integrity；react-scripts 5.x及以上版本内置webpack 5，可使用最新版插件。

解决步骤 #

1. 修正config.output的修改逻辑，保留原有配置的基础上新增属性，修改后的完整config-overrides.js代码如下：

const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');

module.exports = function override(config, env) {
  config.optimization.splitChunks.cacheGroups = {
    ...config.optimization.splitChunks.cacheGroups,
    project: {
      test: /[\\/]node_modules[\\/]@project[\\/]/
    }
  };

  // 修正：不覆盖原有output配置，仅新增crossOriginLoading属性
  config.output.crossOriginLoading = 'anonymous';

  config.plugins = [...config.plugins, new SubresourceIntegrityPlugin()];

  return config;
};

2. 若修正配置后仍报错，调整插件版本匹配你的webpack版本：

• 若使用react-scripts 4.x及以下版本，执行命令安装兼容版本：
  yarn add webpack-subresource-integrity@1 --dev
• 若使用react-scripts 5.x及以上版本，直接更新插件到最新版即可：
  yarn add webpack-subresource-integrity@latest --dev

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