Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue-loader fails to load vue-template-compiler #1781

Closed
tarkhil opened this issue Dec 28, 2020 · 8 comments
Closed

vue-loader fails to load vue-template-compiler #1781

tarkhil opened this issue Dec 28, 2020 · 8 comments

Comments

@tarkhil
Copy link

tarkhil commented Dec 28, 2020

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
Copy link
Member

sodatea commented Jan 10, 2021

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
Copy link

@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
Copy link
Author

tarkhil commented Jan 11, 2021 via email

@takhello
Copy link

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

@samipe
Copy link

samipe commented Mar 25, 2021

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.

@sodatea
Copy link
Member

sodatea commented Mar 25, 2021

@samipe

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

@cyberop5
Copy link

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

@FlyDreame
Copy link

FlyDreame commented May 7, 2021

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 webpack@5.22.0 -D and repeat the ways .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants