版本冲突报错Uncaught DOMException：自定义组件名mwc-icon已被注册

错误信息 #

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "mwc-icon" has already been used with this registry.

错误原因 #

该异常是由于项目依赖树中存在多份版本不一致的Material Custom Component相关包，全局自定义元素注册表不允许同一元素名称被多次注册，因此触发报错。

Yarn包管理器环境下的修复步骤 #

• 排查重复依赖来源
  执行以下命令查看分别是哪些依赖引入了不同版本的mwc相关包：
  yarn why @material/mwc-icon
yarn why @material/web
• 配置强制统一版本规则
  在项目根目录的package.json文件中新增resolutions字段，指定所有相关组件的统一版本，示例如下：

  "resolutions": {
    "@material/mwc-icon": "^0.27.0",
    "@material/web": "^1.0.1",
    // 其他用到的mwc系列组件可在此补充指定相同版本
    "@material/mwc-button": "^0.27.0"
  }
  

  版本号可根据项目实际兼容要求调整。
• 清理缓存重装依赖
  执行以下命令清除旧依赖缓存并重新安装，让版本规则生效：

  rm -rf node_modules yarn.lock
  yarn cache clean
  yarn install
  

• 特殊场景处理
  若项目依赖的第三方组件已内置打包好的mwc代码，无法通过resolutions统一版本时，可使用自定义元素Scoped Registry特性重命名冲突元素，该方案仅在前述方案无效时使用。

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