升级Webpack5后PeerDepsExternalsPlugin致构建失败，如何修复？

从你的报错栈和配置来看，这个问题大概率是因为PeerDepsExternalsPlugin@1.0.4版本太旧，和Webpack5的内部API不兼容。Webpack5对ExternalModule的实现做了不少改动，而这个版本的插件还停留在适配Webpack4的逻辑上，导致生成的外部模块缺少必要的hash计算数据，触发了ERR_INVALID_ARG_TYPE错误。

下面是具体的解决步骤：

1. 升级PeerDepsExternalsPlugin到兼容Webpack5的版本 #

首先检查插件的最新版本，目前peer-deps-externals-webpack-plugin已经发布了适配Webpack5的版本，你可以直接升级：

npm install peer-deps-externals-webpack-plugin@latest --save-dev
# 或者用yarn
yarn add peer-deps-externals-webpack-plugin@latest -D

升级后再重新运行构建，大部分情况下这个错误会直接消失。

2. 如果升级后仍有问题，手动配置插件参数 #

如果升级后还是有异常，可以尝试显式指定插件要处理的依赖范围，避免它意外处理了Webpack5内部的模块：

new PeerDepsExternalsPlugin({
  // 只处理package.json中的peerDependencies
  includeDependencies: true,
  // 排除不需要外部化的依赖（如果有的话）
  excludeDependencies: []
})

3. 替代方案：手动配置Webpack externals #

如果插件升级后依然无法解决问题，你可以直接用Webpack5原生的externals配置来替代这个插件的功能，这样更稳定：

1. 先读取你的package.json中的peerDependencies
2. 将它们转化为Webpack externals的格式

示例代码：

const fs = require('fs');
const path = require('path');

// 读取peerDependencies
const packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json'), 'utf8'));
const peerDeps = packageJson.peerDependencies || {};

// 转化为externals配置
const externals = Object.keys(peerDeps).reduce((acc, dep) => {
  acc[dep] = {
    commonjs: dep,
    commonjs2: dep,
    amd: dep,
    root: dep // 全局变量形式，如果需要的话
  };
  return acc;
}, {});

// 然后在Webpack配置中添加externals
module.exports = {
  // ...其他配置
  externals: externals,
  // ...plugins中移除PeerDepsExternalsPlugin
};

为什么会出现这个错误？ #

Webpack5在ExternalModule的updateHash方法中，期望模块有有效的request或其他可用于计算hash的数据，但旧版本的PeerDepsExternalsPlugin生成的外部模块可能没有正确设置这些属性，导致Hash.update接收到undefined参数，从而抛出类型错误。

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