title: Laravel Mix: npm run dev and npm run watch error-> configuration.loader should be an object
body: <p>I recently tried to compile my files on development platform by using <code>npm run watch</code> &amp; also <code>npm run dev</code>, but both gave me an error given below:</p>
  <blockquote>
  <p>[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.</p>
  <ul>
  <li>configuration.loader should be an object:
  object { … }
  -&gt; Custom values available in the loader context.</li>
  </ul>
  </blockquote>
  <p>I'm not sure what caused this I tried searching but no solution was found on the web.</p>
  <p><strong>package.json</strong></p>
  <pre><code>{
      &quot;private&quot;: true,
      &quot;scripts&quot;: {
          &quot;dev&quot;: &quot;npm run development&quot;,
          &quot;development&quot;: &quot;mix&quot;,
          &quot;watch&quot;: &quot;mix watch&quot;,
          &quot;watch-poll&quot;: &quot;mix watch -- --watch-options-poll=1000&quot;,
          &quot;hot&quot;: &quot;mix watch --hot&quot;,
          &quot;prod&quot;: &quot;npm run production&quot;,
          &quot;production&quot;: &quot;mix --production&quot;
      },
      &quot;devDependencies&quot;: {
          &quot;@popperjs/core&quot;: &quot;^2.0.6&quot;,
          &quot;@vue/test-utils&quot;: &quot;^1.1.2&quot;,
          &quot;alpinejs&quot;: &quot;^3.2.2&quot;,
          &quot;axios&quot;: &quot;^0.21.1&quot;,
          &quot;babel-core&quot;: &quot;^7.0.0-bridge.0&quot;,
          &quot;babel-jest&quot;: &quot;^26.6.3&quot;,
          &quot;babel-loader&quot;: &quot;^8.2.1&quot;,
          &quot;babel-preset-env&quot;: &quot;^1.7.0&quot;,
          &quot;bootstrap&quot;: &quot;^5.0.1&quot;,
          &quot;cross-env&quot;: &quot;^7.0&quot;,
          &quot;cross-var&quot;: &quot;^1.1.0&quot;,
          &quot;css-loader&quot;: &quot;^5.2.7&quot;,
          &quot;jest&quot;: &quot;^26.6.3&quot;,
          &quot;jquery&quot;: &quot;^3.5.1&quot;,
          &quot;laravel-mix&quot;: &quot;^6.0.25&quot;,
          &quot;livewire-vue&quot;: &quot;^0.3.1&quot;,
          &quot;lodash&quot;: &quot;^4.17.21&quot;,
          &quot;perfect-scrollbar&quot;: &quot;^1.5.0&quot;,
          &quot;popper.js&quot;: &quot;^1.16.1&quot;,
          &quot;pusher-js&quot;: &quot;^7.0.3&quot;,
          &quot;resolve-url-loader&quot;: &quot;^3.1.2&quot;,
          &quot;sass&quot;: &quot;^1.32.8&quot;,
          &quot;sass-loader&quot;: &quot;^12.1.0&quot;,
          &quot;socket.io-client&quot;: &quot;^3.1.2&quot;,
          &quot;webpack&quot;: &quot;^5.46.0&quot;,
          &quot;webpack-cli&quot;: &quot;^4.7.2&quot;
      },
      &quot;jest&quot;: {
          &quot;testURL&quot;: &quot;http://localhost&quot;,
          &quot;roots&quot;: [
              &quot;&lt;rootDir&gt;/tests/Javascript/&quot;
          ],
          &quot;moduleNameMapper&quot;: {
              &quot;^@/(.*)$&quot;: &quot;&lt;rootDir&gt;/resources/js/$1&quot;
          },
          &quot;moduleFileExtensions&quot;: [
              &quot;js&quot;,
              &quot;vue&quot;
          ],
          &quot;transform&quot;: {
              &quot;^.+\\.js$&quot;: &quot;babel-jest&quot;,
              &quot;.*\\.(vue)$&quot;: &quot;vue-jest&quot;
          }
      },
      &quot;dependencies&quot;: {
          &quot;@babel/polyfill&quot;: &quot;^7.12.1&quot;,
          &quot;@chakra-ui/vue&quot;: &quot;^0.6.6&quot;,
          &quot;@emotion/core&quot;: &quot;^11.0.0&quot;,
          &quot;@emotion/react&quot;: &quot;^11.1.1&quot;,
          &quot;@emotion/styled&quot;: &quot;^11.0.0&quot;,
          &quot;acorn&quot;: &quot;^8.0.4&quot;,
          &quot;babel-preset&quot;: &quot;^1.1.7&quot;,
          &quot;bootstrap-icons&quot;: &quot;^1.5.0&quot;,
          &quot;bootstrap-vue&quot;: &quot;^2.19.0&quot;,
          &quot;bufferutil&quot;: &quot;^4.0.2&quot;,
          &quot;canvas&quot;: &quot;^2.6.1&quot;,
          &quot;clipboard&quot;: &quot;^2.0.6&quot;,
          &quot;copy-webpack-plugin&quot;: &quot;^9.0.1&quot;,
          &quot;core-js&quot;: &quot;^3.7.0&quot;,
          &quot;emotion&quot;: &quot;^10.0.27&quot;,
          &quot;formBuilder&quot;: &quot;^3.6.1&quot;,
          &quot;html2canvas&quot;: &quot;^1.0.0-rc.7&quot;,
          &quot;imagemagick&quot;: &quot;^0.1.3&quot;,
          &quot;intersection-observer&quot;: &quot;^0.11.0&quot;,
          &quot;js-cookie&quot;: &quot;^2.2.1&quot;,
          &quot;lodash.remove&quot;: &quot;^4.7.0&quot;,
          &quot;node-sass&quot;: &quot;^6.0.0&quot;,
          &quot;portal-vue&quot;: &quot;^2.1.7&quot;,
          &quot;react&quot;: &quot;^17.0.1&quot;,
          &quot;regenerator-runtime&quot;: &quot;^0.13.7&quot;,
          &quot;utf-8-validate&quot;: &quot;^5.0.3&quot;,
          &quot;webrtc-adapter&quot;: &quot;^7.7.0&quot;,
          &quot;yargs-parser&quot;: &quot;^20.2.4&quot;
      },
      &quot;resolutions&quot;: {
          &quot;yargs-parser&quot;: &quot;^19.0.1&quot;
      }
  }
  </code></pre>
  <p><em><strong>Update: Added webpack.mix.js</strong></em></p>
  <p><strong>webpack.mix.js</strong></p>
  <pre><code>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'
      });
  }
  
  </code></pre>
  <p>Is there something wrong in above file? or the issue persist somewhere else?</p>