Invalid configuration object. Object has been initialized ('webpackbar')

In the previous week, I explored the world of Laravel + Vue development as I need some knowledge in this for my upcoming internship.

I have created 2 other proof of concepts so far, and both didn't get this error. But when I created the third proof of concept, this error suddenly became an issue. It even re-appeared when I created a new project and put the same stuff in again. I don't recollect doing anything different compared to the previous times I created an app.

The error appears when I run 'npm run hot' to start up my front-end Vue application. (Note: npm run watch does work, it is an issue with run hot). This is the full error:

[webpack-cli] Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema. - configuration has an unknown property 'webpackbar'. These properties are valid: object { bonjour?, client?, compress?, devMiddleware?, f?, https?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, public?, setupExitSignals?, static?, transportMode?, watchFiles? }

I have seen similar questions with another word than 'webpackbar' but never with 'webpackbar' specifically, so I figured I'd ask a new question.

I have no idea what files I need to show for some of you to understand the error, so please comment or answer which files you all need to see. Here are some that could be related (not sure, I'm quite a newb in this framework).

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).vue().disableNotifications();

app.js

require('./bootstrap');

import Vue from 'vue'
import App from './vue/app'
import VueRouter from 'vue-router';
import routes from './routes';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.use(VueRouter);

const app = new Vue({
    el: '#app',
    components: { App },
    router: new VueRouter(routes)
})

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue-template-compiler": "^2.6.14"
    },
    "dependencies": {
        "bootstrap": "^5.1.0",
        "bootstrap-vue": "^2.21.2",
        "vue": "^2.6.14",
        "vue-loader": "^15.9.8",
        "vue-router": "^3.5.2"
    }
}

Any comments or answers are appreciated!