No named VueLoaderPlugin export in TypeScript webpack config

[davelsan]

Version

16.0.0-alpha.3

Reproduction link

File of interest:
https://github.com/davelsan/vue-next-starter/blob/master/webpack.config.ts
Full repo:
https://github.com/davelsan/vue-next-starter

Steps to reproduce

Simple version:

1. Create a webpack.config.ts file
2. Try to import { VueLoaderPlugin } from 'vue-loader'

Using the provided repro

1. Comment lines [13-15] in webpack.config.ts

What is expected?

There should be a named export or a type definition for the default export that allows creating a new VueLoaderPlugin() object.

What is actually happening?

webpack.config.ts:8:10 - error TS2305: Module '"./node_modules/vue-loader/dist"' has no exported member 'VueLoaderPlugin'.

Additional Comments

The repro repository is a working Vue application built without the CLI toolchain. To work around the errors listed above, I augmented the 'vue-loader' plugin as described in the TypeScript documentation:

declare module 'vue-loader' {
  export class VueLoaderPlugin extends Plugin { }
}

This is only an issue when using a webpack.config.ts, the js version works fine.

[davelsan]

Taking #1542 as inspiration, I tried adding the export directly to index.d.ts and it does fix the issue.

  import { TemplateCompiler, CompilerOptions, SFCTemplateCompileOptions } from '@vue/compiler-sfc';
+ import { Plugin } from 'webpack';
+ export class VueLoaderPlugin extends Plugin { }
  export interface VueLoaderOptions {
      transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls'];
      compiler?: TemplateCompiler;
      compilerOptions?: CompilerOptions;
      hotReload?: boolean;
      exposeFilename?: boolean;
      appendExtension?: boolean;
  }

My uneducated guess is that the problem might be in the way VueLoaderPlugin is imported and re-exported?

vue-loader/src/plugin.ts

Lines 1 to 12 in 356f686

	const webpack = require('webpack')
	let VueLoaderPlugin = null
	if (webpack.version && webpack.version[0] > 4) {
	// webpack5 and upper
	VueLoaderPlugin = require('./pluginWebpack5')
	} else {
	// webpack4 and lower
	VueLoaderPlugin = require('./pluginWebpack4')
	}
	module.exports = VueLoaderPlugin

vue-loader/src/index.ts

Line 28 in 356f686

const VueLoaderPlugin = require('./plugin')

vue-loader/src/index.ts

Line 249 in 356f686

;(loader as any).VueLoaderPlugin = VueLoaderPlugin

[davelsan]

Simplified the issue a bit. The current work-around is to use module augmentation in webpack.config.ts.

[haoqunjiang]

Fixed in beta 2