Vue cli using webpack 4 instead of 5 by default

Viewed 5087

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.

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/cli-service@5.0.0-beta.0 @vue/cli-plugin-babel@5.0.0-beta.0 @vue/cli-plugin-eslint@5.0.0-beta.0 @vue/cli-plugin-vuex@5.0.0-beta.0. 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
// ...

Related