Laravel Mix: npm run dev and npm run watch error-> configuration.loader should be an object

Question

I recently tried to compile my files on development platform by using npm run watch & also npm run dev, but both gave me an error given below:

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

• configuration.loader should be an object: object { … } -> Custom values available in the loader context.

I'm not sure what caused this I tried searching but no solution was found on the web.

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": {
        "@popperjs/core": "^2.0.6",
        "@vue/test-utils": "^1.1.2",
        "alpinejs": "^3.2.2",
        "axios": "^0.21.1",
        "babel-core": "^7.0.0-bridge.0",
        "babel-jest": "^26.6.3",
        "babel-loader": "^8.2.1",
        "babel-preset-env": "^1.7.0",
        "bootstrap": "^5.0.1",
        "cross-env": "^7.0",
        "cross-var": "^1.1.0",
        "css-loader": "^5.2.7",
        "jest": "^26.6.3",
        "jquery": "^3.5.1",
        "laravel-mix": "^6.0.25",
        "livewire-vue": "^0.3.1",
        "lodash": "^4.17.21",
        "perfect-scrollbar": "^1.5.0",
        "popper.js": "^1.16.1",
        "pusher-js": "^7.0.3",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^12.1.0",
        "socket.io-client": "^3.1.2",
        "webpack": "^5.46.0",
        "webpack-cli": "^4.7.2"
    },
    "jest": {
        "testURL": "http://localhost",
        "roots": [
            "<rootDir>/tests/Javascript/"
        ],
        "moduleNameMapper": {
            "^@/(.*)$": "<rootDir>/resources/js/$1"
        },
        "moduleFileExtensions": [
            "js",
            "vue"
        ],
        "transform": {
            "^.+\\.js$": "babel-jest",
            ".*\\.(vue)$": "vue-jest"
        }
    },
    "dependencies": {
        "@babel/polyfill": "^7.12.1",
        "@chakra-ui/vue": "^0.6.6",
        "@emotion/core": "^11.0.0",
        "@emotion/react": "^11.1.1",
        "@emotion/styled": "^11.0.0",
        "acorn": "^8.0.4",
        "babel-preset": "^1.1.7",
        "bootstrap-icons": "^1.5.0",
        "bootstrap-vue": "^2.19.0",
        "bufferutil": "^4.0.2",
        "canvas": "^2.6.1",
        "clipboard": "^2.0.6",
        "copy-webpack-plugin": "^9.0.1",
        "core-js": "^3.7.0",
        "emotion": "^10.0.27",
        "formBuilder": "^3.6.1",
        "html2canvas": "^1.0.0-rc.7",
        "imagemagick": "^0.1.3",
        "intersection-observer": "^0.11.0",
        "js-cookie": "^2.2.1",
        "lodash.remove": "^4.7.0",
        "node-sass": "^6.0.0",
        "portal-vue": "^2.1.7",
        "react": "^17.0.1",
        "regenerator-runtime": "^0.13.7",
        "utf-8-validate": "^5.0.3",
        "webrtc-adapter": "^7.7.0",
        "yargs-parser": "^20.2.4"
    },
    "resolutions": {
        "yargs-parser": "^19.0.1"
    }
}

Update: Added webpack.mix.js

webpack.mix.js

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

mix.setPublicPath('public')
    .setResourceRoot('../')
    .vue()
    .sass('resources/sass/frontend/app.scss', 'css/frontend.css')
    .sass('resources/sass/backend/app.scss', 'css/backend.css')
    .js('resources/js/frontend/app.js', 'js/frontend.js')
    .js([
        'resources/js/backend/before.js',
        'resources/js/backend/app.js',
        'resources/js/backend/after.js'
    ], 'js/backend.js')
    .js('resources/js/global.js', 'js/global.js')
    .js('resources/js/Banners/banner.js', 'js/banner.js')
    .extract([
        // Extract packages from node_modules to vendor.js
        'alpinejs',
        'jquery',
        'bootstrap',
        'popper.js',
        'axios',
        'sweetalert2',
        'lodash'
    ])
    .sourceMaps();

if (mix.inProduction()) {
    mix.version();
} else {
    // Uses inline source-maps on development
    mix.webpackConfig({
        loader: 'url-loader',
        devtool: 'inline-source-map'
    });
}

Is there something wrong in above file? or the issue persist somewhere else?

Answer 1

In webpack.mix.js Simply remove loader: 'url-loader' it worked for me