vue-loader fails to load vue-template-compiler

Version

16.1.2

Reproduction link

https://github.com/tarkhil/vue-loader-error

Steps to reproduce

just run webpack

What is expected?

compiled js files

What is actually happening?

[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/home/tarkhil/tmp/billing/node_modules/webpack/lib/NormalModule.js:171:10)
    at /home/tarkhil/tmp/billing/node_modules/vue-loader/lib/plugin-webpack5.js:36:70
    at Hook.eval [as call] (eval at create (/home/tarkhil/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:100:1)
    at Hook.CALL_DELEGATE [as _call] (/home/tarkhil/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/tarkhil/node_modules/webpack/lib/Compiler.js:943:26)
    at /home/tarkhil/node_modules/webpack/lib/Compiler.js:984:29
    at Hook.eval [as callAsync] (eval at create (/home/tarkhil/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/tarkhil/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/home/tarkhil/node_modules/webpack/lib/Compiler.js:979:28)
    at /home/tarkhil/node_modules/webpack/lib/Compiler.js:470:12
    at Compiler.readRecords (/home/tarkhil/node_modules/webpack/lib/Compiler.js:821:11)
    at /home/tarkhil/node_modules/webpack/lib/Compiler.js:467:11
    at Hook.eval [as callAsync] (eval at create (/home/tarkhil/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/tarkhil/node_modules/tapable/lib/Hook.js:18:14)
    at /home/tarkhil/node_modules/webpack/lib/Compiler.js:464:20
    at Hook.eval [as callAsync] (eval at create (/home/tarkhil/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)

---

If it’s a config issue, it should be mentioned somewhere.

The same with vue-loader@14 yields

[webpack-cli] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at new NodeError (node:internal/errors:278:15)
    at validateString (node:internal/validators:123:11)
    at Object.basename (node:path:1200:5)
    at new module.exports (/home/tarkhil/tmp/billing/node_modules/vue-loader/lib/loader.js:32:25)
    at Object.<anonymous> (/home/tarkhil/tmp/billing/webpack.config.js:8:2)
    at Module._compile (/home/tarkhil/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19) {
  code: 'ERR_INVALID_ARG_TYPE'
}

And I have no idea what path is required

[sodatea]

@samipe

• Vue 3 requires vue-loader v16 + @vue/compiler-sfc;
• Vue 2 requires vue-loader v15 + vue-template-compiler.

[sontd-0882]

@tarkhil What @vue/cli version do you use?

vue --version

I guess using an outdated version, upgrade to Vue CLI v4.5.10 and it should work.