autoInjectable not working in Chrome Extension using Webpack

Describe the bug TSyringe seems not to be working when used in a Chrome Extension using Webpack and ts-loader.

To Reproduce

// Database.ts
class Database {
    constructor() {}
}

export default Database;

// ConfigService.ts
import "reflect-metadata";
import { autoInjectable } from "tsyringe";
import Database from "../Database";

@autoInjectable()
class ConfigService {
    constructor(private db?: Database) {}
}

export default ConfigService;

// Background.ts
import "reflect-metadata";
import { container } from "tsyringe";
import Database from "../db/Database";
import ConfigService from "../db/services/ConfigService";

container.register<Database>(Database, { useClass: Database });

const service = new ConfigService();

Expected behavior Expected new ConfigService() to return a ConfigService instance with dependencies resolved automatically.

Actual behavior new ConfigService() throws an uncaught TypeError Class constructor ConfigService cannot be invoked without ‘new’

Version: 4.4.0

[ffortier]

It looks like webpack is prefering the "module": "./dist/esm5/index.js" config in the tsyringe/package.json over the better option "es2015": "./dist/esm2015/index.js". The esm5 does not use the class keyword and that’s why you’re getting this error. To fix it, I added the following config in my webpack.config.js file:

{
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            tsyringe: require.resolve('tsyringe/dist/esm2015/index.js'),
        },
    },
}

[ckifer]

Not to resurrect this, but is there any way that this could be solved by the repository rather than by each user? Same issue today when running webpack but packing files for a Node runtime and using esbuild-loader. Why does it resolve to esm5 when our targets are higher?