webpack without vue-cli fails on `compilation != Compilation`

[lizthegrey]

here's a partial webpack.ts:

import { VueTsCheckerPlugin } from "@juit/vue-ts-checker";

export default = {
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: "ts-loader",
          options: {
            appendTsSuffixTo: [/\.vue$/],
            configFile: path.join(paths.root, "tsconfig.client.json"),
          },
          exclude: /node_modules/,
        },

        // Compilation for Vue single file components (*.vue)
        {
          test: /\.vue$/,
          loader: "vue-loader",
        },
      ],
    },

    plugins: [
      // Cleans up any obsolete build artifacts (e.g. images that have since be>
      // deleted).
      new CleanWebpackPlugin(),
      new CleanupMiniCssExtractPlugin(),

      // Required for loading .vue files
      new VueLoaderPlugin(),
      // Typecheck Vue templates.
      new VueTsCheckerPlugin({
        tsconfig: path.join(paths.root, "tsconfig.client.json"),
      }),
    ],

    [...]
}

$ yarn run build-server && webpack --config out/server/infra/build-client/webpack.prod.js
$ tsc
[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/home/lizf/eve-roster/node_modules/@juit/vue-ts-checker/node_modules/webpack/lib/NormalModule.js:195:10)
    at /home/lizf/eve-roster/node_modules/@juit/vue-ts-checker/dist/webpack.js:57:36
    at Hook.eval [as call] (eval at create (/home/lizf/eve-roster/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:102:1)
    at Hook.CALL_DELEGATE [as _call] (/home/lizf/eve-roster/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/lizf/eve-roster/node_modules/webpack/lib/Compiler.js:1031:26)
    at /home/lizf/eve-roster/node_modules/webpack/lib/Compiler.js:1073:29
    at Hook.eval [as callAsync] (eval at create (/home/lizf/eve-roster/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/lizf/eve-roster/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/home/lizf/eve-roster/node_modules/webpack/lib/Compiler.js:1068:28)
    at /home/lizf/eve-roster/node_modules/webpack/lib/Compiler.js:496:12
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[BinarySpike]

I'm getting the same issue using vue-cli.

[BinarySpike]

I had to upgrade my @vue/cli to @vue/cli@next

[pfumagalli]

@lizthegrey @BinarySpike

Yes, @vue/cli still uses WebPack 4, while this puppy wants WebPack 5.

You can see that it gets WP5 as a local subdependency (node_modules/@juit/vue-ts-checker/node_modules/webpack) rather than using the shared one (node_modules/webpack).