microsoft/tsyringe

tsyringe is not usable with WebComponent API

aino-gautam opened this issue · 1 comments

Describe the bug

Trying to build a project with tsyringe driven DI and implementing a WebComponent throws an exception -

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

To Reproduce

import "reflect-metadata";
import {container} from "tsyringe";

function main() {
  // Put your sample code here...
}

Expected behavior

Version:

Is this an issue with tsyringe or reflect-metadata? Do you have your typescript config setup properly?

The reproduction steps here are a bit slim, I'm not sure what this has to do with WebComponents for example nor how tsyringe is coming into the equation -- if you remove import {container} from 'tsyringe' do you still get the error?