在Electron应用中安装@heroicons/react时出现DLL错误如何解决？

AI 小北

2026-9-23

解决@heroicons/react Webpack DLL 编译找不到包的方案

原因说明

这个问题是因为@heroicons/react v2及以上版本采用纯ES模块规范导出，默认的Webpack DLL配置如果没有做ES模块兼容、或者入口配置漏加该依赖，就会触发找不到模块的报错。

修复步骤

第一步：确认dll配置入口已添加该依赖
打开你的webpack.dll.config.js，在entry的vendor数组里明确加入@heroicons/react，参考配置：

module.exports = {
  entry: {
    // 其他依赖保留，新增@heroicons/react
    vendor: ['react', 'react-dom', '@heroicons/react']
  },
  // 其他原有配置
}

第二步：添加ES模块转译规则
在dll配置的module.rules中新增针对@heroicons包的转译规则，确保webpack可以正确识别它的ES模块导出：

module.exports = {
  // 其他原有配置
  module: {
    rules: [
      // 其他原有规则保留，新增以下规则
      {
        test: /\.jsx?$/,
        include: /node_modules\/@heroicons/,
        use: ['babel-loader']
      }
    ]
  }
}

如果你的项目用TypeScript，还要确认tsconfig.json中的moduleResolution配置为node16或bundler，避免模块解析失败。

第三步：重新生成dll文件
先删除已生成的旧dll文件（通常存放在public/dll或你自定义的dll输出目录），再运行dll编译命令，比如npm run build:dll，确认编译过程无报错。
第四步：校验DllReferencePlugin配置
确认项目主webpack配置中的DllReferencePlugin指向的manifest.json路径和你dll编译输出的manifest路径完全一致，参考配置：

const DllReferencePlugin = require('webpack/lib/DllReferencePlugin')
module.exports = {
  plugins: [
    new DllReferencePlugin({
      manifest: require('./dist/vendor-manifest.json') // 替换为你实际的manifest文件路径
    })
  ]
}