构建WebComponents时使用tsyringe依赖注入遇构造错误求解决

问题描述 #

我正在开发一个同时使用tsyringe和Webpack 5的应用。此前的类与DOM交互（包括自定义事件订阅机制）都运行顺畅，但在实现WebComponent时遇到如下报错：

Uncaught TypeError: Failed to construct 'HTMLDivElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at class_1.DesignDirector [as constructor] (DesignDirector.ts:41:1)
    at new class_1 (Decorator.ts:36:1)
    at dependency-container.js:354:1
    at InternalDependencyContainer.construct (dependency-container.js:362:10)
    at InternalDependencyContainer.resolve (dependency-container.js:113:1)
    at 665 (StageManager.ts:29:1)
    at __webpack_require__ (bootstrap:19:1)
    at 973 (main.ts:16:22)
    at __webpack_require__ (bootstrap:19:1)
    at startup:4:1

已将编译目标设为ES6并添加了所需polyfills。

问题分析 #

报错核心是tsyringe实例化依赖时，错误地调用了原生DOM构造函数（如HTMLDivElement），未使用new操作符；或是Webpack的编译/ tree-shaking机制破坏了原生DOM构造函数的调用逻辑。

解决方案 #

• 修正依赖注入逻辑
  不要将原生DOM构造函数（如HTMLDivElement）作为依赖注入的对象。如果需要创建DOM元素，直接在类内部通过new HTMLDivElement()或document.createElement('div')生成，而非依赖注入构造函数。

• 配置Webpack保护原生构造函数
  在Webpack配置中添加规则，避免编译转换原生DOM相关构造逻辑：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          options: {
            compilerOptions: {
              target: 'ES6',
              preserveConstEnums: true,
              module: 'ESNext'
            }
          }
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js']
    }
  };
  

• 调整tsyringe实例化方式
  若DesignDirector继承自原生DOM元素，避免让tsyringe直接构造该类，改为手动实例化后注入容器：

  import { injectable, container } from 'tsyringe';
  
  @injectable()
  class DesignDirector extends HTMLDivElement {
    constructor() {
      super();
      // 初始化逻辑
    }
  }
  
  // 手动实例化后注册到容器
  const directorInstance = new DesignDirector();
  container.registerInstance(DesignDirector, directorInstance);
  

• 检查TypeScript配置
  确保tsconfig.json配置正确，避免编译时破坏原生类构造逻辑：

  {
    "compilerOptions": {
      "target": "ES6",
      "module": "ESNext",
      "downlevelIteration": true,
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "strict": true
    }
  }
  

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