webpack 5 plugin element injection in ie 11

[elitastic]

I'm submitting a bug report

• Library Version: latest webpack 5 version directly from github source
• Operating System: Windows 10
• Node Version: 12.20
• NPM Version: PNPM 6.6.2
• JSPM OR Webpack AND Version Webpack 5.38.1
• Browser: IE 11
• Language: TypeScript 4.3

Current behavior: "Element" is not injected correctly in IE 11 when using @autoinject.

There's no problem at all in Chrome/Firefox (unfortunately we must still support IE 11).

There are two available workarounds to fix it in IE 11:

• Using @inject(Element) instead of @autoinject()
• Disable transpileOnly in ts-loader

What is the expected behavior? Should work in IE 11 without enabling any workarounds

Repro webpack.config.js

const path = require('path');
const basedir = __dirname;
const { AureliaPlugin } = require('aurelia-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    target: 'web',
    mode: 'none',
    devtool: false,
    resolve: {
        extensions: ['.ts', '.js'],
        modules: ['src', 'node_modules']
    },
    entry: {
        'main': ['promise-polyfill/src/polyfill', 'aurelia-bootstrapper', path.resolve(basedir, 'src', 'main.ts')]
    },
    output: {
        filename: '[name]-[contenthash].js',
        path: path.resolve(basedir, 'dist'),
        environment: {
            arrowFunction: false,
            const: false,
            destructuring: false,
            module: false,
            bigIntLiteral: false,
            dynamicImport: false,
            forOf: false
        }
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true
                    }
                }]
            },
            {
                test: /\.html$/,
                use: [{
                    loader: 'html-loader',
                    options: {
                        minimize: true,
                        esModule: false
                    }
                }]
            }
        ]
    },
    plugins: [
        new AureliaPlugin(),
        new HtmlWebpackPlugin({
            template: 'src/index.tmpl',
            inject: true,
            filename: 'index.html'
        })
    ]
};

main.ts

import 'aurelia-polyfills';
import { Aurelia, PLATFORM } from 'aurelia-framework';

export async function configure(aurelia: Aurelia)
{
    aurelia.use
        .standardConfiguration()
        .developmentLogging('warn');

    await aurelia.start();
    await aurelia.setRoot(PLATFORM.moduleName('app'), document.body);
}

app.ts

import { autoinject } from 'aurelia-framework';

@autoinject()
export class App
{
    constructor(
        private element: Element)
    {
    }

    async activate()
    {
        alert(this.element?.tagName ? 'Element correctly injected' : 'There\'s a problem with element injection');
    }
}

app.html

<template>
   Hello World
</template>

[bigopon]

@elitastic I'll close this for now, since it should work with latest master already. Please feel free to open if your tests gets a different result.

[elitastic]

Unfortunately it's still not working with latest master. Still the same problem with @autoinject and native elements when transpileOnly is enabled in ts-loader.

[elitastic]

Could you please reopen this issue (see my previous answer)?

[ItWorksOnMyMachine]

I have never successfully gotten autoinject to work with interfaces because interfaces are compiled out by TS. In this case, I would simply use @inject(Element).