title: Gulp v3.9, You may need an appropriate loader to handle this file type. in Laravel v^8.4
body: <p>I'm currently reviving 1, 2 year old Laravel 8 project and tried updating it's dependencies,
  I have done most of the upgrading and downgrading.
  But I'm still stuck in dependencies hell.</p>
  <p>This is the what I'm getting in terminal after runnig</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>$ gulp</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>ubuntu@ip-172-31-89-183:/var/www/html$ sudo gulp
  [08:43:25] Using gulpfile /var/www/html/gulpfile.js
  [08:43:25] Starting 'all'...
  [08:43:25] Starting 'sass'...
  [08:43:26] Finished 'sass' after 1.67 s
  [08:43:26] Starting 'webpack'...
  { [PluginError: ./~/bootstrap/dist/js/bootstrap.esm.js
  Module parse failed: /var/www/html/node_modules/bootstrap/dist/js/bootstrap.esm.js Unexpected token (1243:15)
  You may need an appropriate loader to handle this file type.
  | 
  |   _getConfig(config) {
  |     config = { ...Default$a,
  |       ...Manipulator.getDataAttributes(this._element),
  |       ...(typeof config === 'object' ? config : {})
   @ ./resources/assets/js/bootstrap.js 18:0-20
   @ ./resources/assets/js/app.js]
    message:
     "./~/bootstrap/dist/js/bootstrap.esm.js\nModule parse failed: /var/www/html/node_modules/bootstrap/dist/js/bootstrap.esm.js Unexpected token (1243:15)\nYou may need an appropriate loader to handle this file type.\n| \n|   _getConfig(config) {\n|     config = { ...Default$a,\n|       ...Manipulator.getDataAttributes(this._element),\n|       ...(typeof config === 'object' ? config : {})\n @ ./resources/assets/js/bootstrap.js 18:0-20\n @ ./resources/assets/js/app.js",
    showStack: false,
    showProperties: true,
    plugin: 'webpack-stream',
    __safety: { toString: [Function: bound ] } }</code></pre>
  </div>
  </div>
  </p>
  <p>my package.json</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{
    "private": true,
    "scripts": {
      "prod": "gulp --production",
      "dev": "gulp watch"
    },
    "devDependencies": {
      "bootstrap": "^5.1.3",
      "bootstrap-sass": "^3.3.7",
      "gulp": "^3.9.1",
      "jquery": "^3.1.0",
      "laravel-elixir": "^6.0.0-9",
      "laravel-elixir-vue": "^0.1.4",
      "laravel-elixir-webpack-official": "^1.0.2",
      "lodash": "^4.14.0",
      "vue": "^1.0.26",
      "vue-resource": "^0.9.3"
    },
    "dependencies": {
      "@popperjs/core": "^2.11.5",
      "laravel-echo": "^1.12.0",
      "pusher-js": "^7.1.1-beta",
      "yuicompressor": "^2.4.8"
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>my gulpfile.js</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const elixir = require('laravel-elixir');
  
  require('laravel-elixir-vue');
  
  /*
   |--------------------------------------------------------------------------
   | Elixir Asset Management
   |--------------------------------------------------------------------------
   |
   | Elixir provides a clean, fluent API for defining some basic Gulp tasks
   | for your Laravel application. By default, we are compiling the Sass
   | file for our application, as well as publishing vendor resources.
   |
   */
  
  elixir(mix =&gt; {
      mix.sass('app.scss')
         .webpack('app.js');
  });
  module.exports = {
      watchOptions: {
        ignored: /node_modules/
      }
    };</code></pre>
  </div>
  </div>
  </p>
  <p>Any Help would be appriciated.</p>