Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue cli using webpack 4 instead of 5 by default

I am trying to get an app up and running with Vue 2 and everything was fine until I tried using the node-sass and sass-loader packages. I started getting errors and after investigation, it looks like I need to be using webpack 5+ for the latest node-sass package to work. After poking around it looks like when I created the project it defaulted to webpack version 4.46.0.

I updated my vue-cli to the latest version as per the instructions on the official page and then tried re-initializing a new project and still have the same issue. Currently, I have @vue/cli 4.5.12 which looks to be the latest (I think).

I am initializing the app with vue create <app-name> and I am using the default configs. I did find this page which says "migrating from v4" which perhaps implies there might be a higher version of vue-cli but again I followed all the instructions to no avail, so not sure if I am just missing something here.

I am pretty novice in Vue and not sure what additional info I should provide to make this useful, but I've searched all over and for the life of me cannot figure out what is going on.

like image 601
djvaroli Avatar asked Mar 29 '21 00:03

djvaroli


People also ask

Does vue use webpack by default?

vue extension, we use a default app entry to load the given component, otherwise we treat it as a normal webpack entry.

Does vue CLI use webpack?

Vue CLI is built on top of Webpack and so for beginners, you do not need to know what Webpack is as the Vue CLI has taken care of the configurations with great default presets and you literally need 0 configs to start.

What server does vue CLI use?

The vue-cli-service serve command starts a dev server (based on webpack-dev-server) that comes with Hot-Module-Replacement (HMR) working out of the box.


1 Answers

From what I found out on GitHub, the latest stable version - 4.5.12 - of Vue CLI still uses Webpack 4: https://github.com/vuejs/vue-cli/blob/v4.5.12/package.json . Considering that, the easiest solution in my opinion would be to just downgrade sass-loader to version 10 with npm install sass-loader@10 for example, as suggested here: https://stackoverflow.com/a/66087132/1505369.

You could try using a beta version of vue-cli, as I tried, by updating both @vue/cli-service and, I believe, all the vue-cli plugins to version 5.0.0-beta.0, with npm install @vue/[email protected] @vue/[email protected] @vue/[email protected] @vue/[email protected]. It should end up installing and using Webpack 5. For me personally though, it hasn't really solved the issue, as the new error occurred:

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

like image 67
kcpr Avatar answered Oct 14 '22 01:10

kcpr