vue-loader fails to load vue-template-compiler

[tarkhil]

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

[haoqunjiang]

Can't reproduce.
I noticed that you didn't install webpack-cli in your project locally. Maybe that's the problem. You might have been using an outdated version of webpack-cli

[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.

[tarkhil]

Yes, thanks. Sorry for false report

…

On 11.01.2021 7:44, sontd-0882 wrote: @tarkhil <https://github.com/tarkhil> What ***@***.***/cli| version do you use? |vue --version | I guess using an outdated version, upgrade to Vue CLI v4.5.10 and it should work. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1781 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAD4K5YXA3NL3E777ZMXYCTSZJ64BANCNFSM4VMCNFSA>.

[takhello]

TypeError: The 'compilation' argument must be an instance of Compilation

[samipe]

I am having the same issue, and I'd wish to use vue-loader without vue-cli. Isn't this possible? Relevant parts of package.json:
"scripts": { "dev": "webpack-dev-server", "build": "webpack --mode production" }, "dependencies": { "vue": "3.0.7" }, "devDependencies": { "vue-loader": "16.1.2", "vue-template-compiler": "2.6.12", "webpack": "5.28.0", "webpack-cli": "4.5.0" }

I tried using both stable (15.9.6) and next version of vue-loader.

[haoqunjiang]

@samipe

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

[cyberop5]

I think this might be related: webpack/webpack#12606

[FlyDreame]

I think I have found a solution to the problem. The main reason for this problem is the webpack imported by vue-loader and the webpack imported by @vue/cli-service are not the same module.

In other words，@vue/cli-service import the webpack in node_modules/@vue/cli-service/node_modules/webpack，vue-loader import the webpack in node_modules/webpack.

So the key to solve the problem is to unify the webpack version。You can try the following ways until there is no webpack module in node_modules/@vue/cli-service/node_modules/webpack.

clear node_modules, delete package-lock.json, and then npm i

If the ways do not work, you have to check the version of webpack in node modules/@vue/cli-service/node_modules/webpack. For example, if the version of webpack is 5.22.0, then npm i [email protected] -D and repeat the ways .