search

microsoft / tsyringe

Lightweight dependency injection container for JavaScript/TypeScript
MIT License
4.91k stars 162 forks source link

tsyringe is not usable with WebComponent API #213

Open aino-gautam opened 1 year ago

aino-gautam commented 1 year ago

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:

chad-fossa commented 2 months ago

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?