Vaadin 19等低版本使用带Vaadin依赖的NPM模块报错求解

你遇到的报错本质是Vaadin 20.0.6之前的版本没有内置依赖去重逻辑，第三方组件嵌套引入的Vaadin组件和框架本身内置的Vaadin组件被同时加载，导致同一个自定义元素在CustomElementRegistry中被重复注册。以下三个方案可以实现和20.0.6版本官方修复相同的效果：

• 方案1：强制锁定所有Vaadin组件版本（最推荐）
  在项目根目录的package.json中新增resolutions（Yarn）或overrides（NPM 8+）字段，将所有Vaadin相关依赖的版本统一锁定为和你当前使用的Vaadin 19版本配套的版本，避免版本差异导致重复加载。
  示例配置（Yarn环境）：

  {
    "name": "your-project",
    "dependencies": {
      // 原有依赖保持不变
    },
    "resolutions": {
      "vaadin/*": "18.0.8", // 对应Vaadin 19配套的Vaadin Web Components版本
      "@vaadin/*": "19.0.0"
    }
  }
  

  配置完成后删除node_modules文件夹和yarn.lock/package-lock.json文件，重新执行依赖安装命令即可。如果使用低于8版本的NPM，可以安装npm-force-resolutions工具实现相同的版本锁定效果。

• 方案2：修改Webpack配置统一组件加载路径
  在项目根目录的webpack.config.js中新增解析别名配置，强制所有Vaadin组件都从项目根目录的node_modules加载，跳过第三方依赖内部嵌套的Vaadin组件：

  const path = require('path');
  const merge = require('webpack-merge');
  const flowDefaults = require('./webpack.generated.js');
  
  module.exports = merge(flowDefaults, {
    resolve: {
      alias: {
        '@vaadin': path.resolve(__dirname, 'node_modules/@vaadin'),
        'vaadin': path.resolve(__dirname, 'node_modules/vaadin')
      }
    }
  });
  

  该方案和Vaadin 20.0.6官方修复的核心逻辑完全一致，官方就是在默认生成的Webpack配置中新增了该别名规则。

• 方案3：自定义元素注册拦截（应急方案）
  如果前两个方案暂时无法落地，可以在前端入口文件（通常是frontend/index.ts或frontend/index.js）的最顶部添加以下代码，拦截自定义元素注册逻辑，已经注册过的元素直接跳过：

  const originalDefine = window.customElements.define;
  window.customElements.define = function(tagName, elementClass, options) {
    if (!window.customElements.get(tagName)) {
      originalDefine.call(this, tagName, elementClass, options);
    }
  };
  

  该方案可以快速消除报错，但若两个版本的组件实现存在差异，可能出现样式或功能异常，仅建议临时调试使用。

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