Vue - npm run serve command crashes because of webpack version (vue-cli-service, laravel-mix, webpack)

to explain my problem, I will start by saying that I am currently making a system in Vue with backend API Laravel (irrelevant). I am making them as 2 separate projects. My problem is in the frontend Vue part. I created it using Vue CLI.

Here is my package.json file:

"dependencies": {
    "@popperjs/core": "^2.9.3",
    "axios": "^0.21.1",
    "bootstrap": "^5.1.0",
    "core-js": "^3.6.5",
    "dotenv": "^10.0.0",
    "vue": "^3.0.0",
    "vue-axios": "^3.2.5",
    "vue-plugin-load-script": "^2.0.1",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2",
    "vuex-persistedstate": "^4.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "laravel-mix": "^6.0.31",
    "prettier": "^2.2.1",
    "resolve-url-loader": "^4.0.0",
    "sass": "^1.38.1",
    "sass-loader": "^12.1.0",
    "webpack": "^5.52.1"
  }

As you can see I am using laravel-mix (specifically to use the npm run dev command). So to use laravel-mix I also needed to install webpack.

Now the problem arises at the point when I try to run npm run serve command to start the app. I get this error:

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)

And I have found 1 solution which was to use webpack 4 instead of 5, which kind of did not work, because when I use webpack 4 I can run "npm run serve" but when I run "npm run dev", it does not mix my assets. No error, only the command is parsed but nothing else.

I really did not find any solution, other than switch webpack version, however the asset mixing part is really cruical in the project.

Update 1:

Here is my webpack.mix.js

let mix = require("laravel-mix");

mix.sass('src/assets/sass/style.scss', 'src/assets/sass')

    .styles([
        'src/assets/template/css/datatables.min.css',
        'src/assets/template/css/rowGroup.dataTables.min.css',
        'src/assets/template/css/fullcalendar.min.css',
        'src/assets/template/css/select2.min.css',
        'src/assets/template/css/bootstrap-colorpicker.min.css',
        'src/assets/template/css/bootstrap-datepicker.min.css',
        'src/assets/template/css/bootstrap.min.css',
        'src/assets/template/css/icons.min.css',
        'src/assets/template/css/app.min.css',
        'src/assets/sass/style.css'
    ], 'public/css/style.css')

    .scripts([
        'src/assets/template/js/jquery.min.js',
        'src/assets/template/js/bootstrap.min.js',
        'src/assets/template/js/metismenu.min.js',
        'src/assets/template/js/simplebar.min.js',
        'src/assets/template/js/node-waves.min.js',
        'src/assets/template/js/waypoints.min.js',
        'src/assets/template/js/jquery-counterup.min.js',
        'src/assets/template/js/datatables.min.js',
        'src/assets/template/js/dataTables.rowGroup.min.js',
        'src/assets/template/js/moment.min.js',
        'src/assets/template/js/jquery-ui-dist.min.js',
        'src/assets/template/js/fullcalendar.min.js',
        'src/assets/template/js/select2.min.js',
        'src/assets/template/js/bootstrap-colorpicker.min.js',
        'src/assets/template/js/bootstrap-datepicker.min.js',
        'src/assets/template/js/apexcharts.min.js',
        'src/assets/template/js/app.min.js',
        'src/assets/js/script.js'
    ], 'public/js/script.js');

Solution

Could not resolve this problem, so instead I found a replacement for laravel-mix

I used gulp and created my own scripts for parsing sass and mixing css,js and minification.

https://gulpjs.com/