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

[Alex Merced]

I am trying to create an express template using the express-vue library and here is the code of the template of the moment, the readme is fairly confusing since the top half has some conflicting info to the bottom half (when to use pagesPath vs rootPath and needs to be installed and what doesn't)

https://github.com/AlexMercedCoder/expressvuetemplate

Description of Issue

I have the template starting and the "/hello" route works fine in sending back a string, I just get the following error when going to "/" but it does seem to be locating the index.vue but the compilation is erroring.

Stack Trace / Console Log

alexmerced@pop-os:~/development/Personal/Templates3/expressvuetemp$ npm run dev
> expressreact@1.0.0 dev /home/alexmerced/development/Personal/Templates3/expressvuetemp
> cross-env NODE_ENV=development nodemon server.js

[nodemon] 2.0.6
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
3000
Loaded Prebuilt Bundles to memory
Your are listening on port 3000
TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/webpack/lib/NormalModule.js:171:10)
    at /home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-loader/lib/plugin-webpack5.js:36:70
    at SyncHook.eval [as call] (eval at create (/home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/webpack/lib/Compiler.js:631:26)
    at /home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/webpack/lib/Compiler.js:662:28)
    at /home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/webpack/lib/Compiler.js:321:11
    at Compiler.readRecords (/home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/webpack/lib/Compiler.js:529:11)
    at /home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/webpack/lib/Compiler.js:318:10
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/tapable/lib/Hook.js:154:20)
    at /home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/webpack/lib/Compiler.js:315:19
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/alexmerced/development/Personal/Templates3/expressvuetemp/node_modules/vue-pronto/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
GET / 304 - - 298.124 ms

[David E Lares S]

I think this is because there are many versions of Webpack installed as dependencies. Run npm ls webpack and see it for yourself.

By matching the same version the error will change. At least, this solved the error in my case, however, you'll have problems with vue-loader and css-loader.

EDIT:

With this combination of dependencies, you will be ok with the library.

"dependencies": {
"@babel/core": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"babel-loader": "^8.2.3",
"express-vue": "^5.16.0",
"webpack": "^4.46.0"
...
}