Error when using import statement

[dmtri310]

Type:

• bug
• feature
• enhancement
• question

Environment:

• OS: Arch Linux
• Browser: Firefox (98.0)
• Library Version: 1.1.9

I'm going to open a PR:

• yes
• no

Description:
Hello! I have a webpack config in typescript (webpack.config.ts) and I get This expression is not constructable error when I use import statement (instead of require)

import ExtReloader from 'webpack-ext-reloader'
import { Configuration } from 'webpack'

const config: Configuration = {
//...
plugins: [
    new ExtReloader(), 
    // ERROR: This expression is not constructable.
    // Type 'typeof import("/home/brose514/Projects/dmtri310/webextension-vue-ts-template/node_modules/webpack-ext-reloader/typings/webpack-ext-reloader")' has no construct signatures.ts(2351)
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "ts-node": {
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}

webpack.config.ts

import HtmlWebpackPlugin from 'html-webpack-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import ExtReloader from 'webpack-ext-reloader'
import { VueLoaderPlugin } from 'vue-loader'
import { Configuration } from 'webpack'
import { resolve } from 'path'

const config: Configuration = {
  entry: {
    content: resolve(__dirname, 'src/content.ts'),
    background: resolve(__dirname, 'src/background.ts'),
    popup: resolve(__dirname, 'src/popup/index.ts'),
    options: resolve(__dirname, 'src/options/index.ts'),
  },
  output: {
    path: resolve(__dirname, 'dist'),
    filename: '[name].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'esbuild-loader',
        options: {
          loader: 'ts',
          target: 'es2015',
        },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          enableTsInTemplate: true,
        },
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins: [
    new ExtReloader(),
    new VueLoaderPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: resolve(
            __dirname,
            'node_modules/webextension-polyfill/dist/browser-polyfill.js',
          ),
        },
        { from: resolve(__dirname, 'src/static') },
      ],
    }),
    new HtmlWebpackPlugin({
      filename: 'popup.html',
      inject: false,
      templateParameters: {
        js: 'popup.js',
      },
    }),
    new HtmlWebpackPlugin({
      filename: 'config.html',
      inject: false,
      templateParameters: {
        js: 'config.js',
      },
    }),
  ],
}

export default config

[MxtOUT]

Same here, if you look at the type definitions you'll see that only types and interfaces are exported, nothing you can construct directly.