vue-loader dependency issue due to which project is not working on IE-11

[Sukhpall-Singh]

• Laravel Veriosn: 5.7.25
• Laravel Mix Version: 4.0.14
• Node Version : v10.14.1
• NPM Version : 6.4.1:
• OS: Windows I have created a vuejs template with laravel integration. On creating project with vue-laravel, by default the laravel-mix version is 2.0 and at that time my project is running well in all browsers. But now I am updating version of laravel-mix from 2.0 to 4.0.14. On updating it, blank screen should be display on I.E browser. As I am new in vue+laravel and not enough knowledge about it. I am trying to resolve this issue by following many links but didn't get the results. Please anyone knows how it should be possible to run vue+laravel project on IE and what changes are required. Here is console error : On expanding error, it shows error on this line as mentioned in screenshot I found this error in vue-loading-spinner which is dependent on vue-loader package. I think there is a dependency issue. How I should resolved it, is there need to add some code in webpack.mix.js file. to resolve this. Here is my webpack.mix.js file code:

//webpack.mix.js

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

  /*
   |--------------------------------------------------------------------------
   | Mix Asset Management
   |--------------------------------------------------------------------------
   |
   | Mix provides a clean, fluent API for defining some Webpack build steps
   | for your Laravel application. By default, we are compiling the Sass
   | file for the application as well as bundling up all the JS files.
   |
   */
   mix.autoload({
    'jquery': ['$', 'window.jQuery', 'jQuery'],
   })

  mix.js('resources/js/main.js', 'public/js');

Here is my development dependencies in package.json file:

// package.json
 "devDependencies": {
   "axios": "^0.18",
   "babel-preset-stage-2": "^6.24.1",
   "bootstrap": "^4.1.3",
   "cross-env": "^5.2.0",
   "jquery": "^3.3.1",
   "laravel-mix": "^4.0.14",
   "lodash": "^4.17.11",
   "node-sass": "^4.11.0",
   "popper.js": "^1.14.6",
   "sass-loader": "^7.1.0",
   "vue": "^2.5.19",
   "vue-template-compiler": "^2.5.22"
 },
"dependencies": {
     "amcharts3": "^3.21.14",
     "auth0-js": "^9.8.2",
     "axios": "^0.18.0",
     "babel-cli": "^6.26.0",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "chart.js": "^2.7.3",
     "echarts": "^4.2.0-rc.2",
     "vue-count-to": "^1.0.13",
      "vue-loading-spinner": "^1.0.11",
     "vue-echarts": "^3.1.3",
     "vue-i18n": "^8.4.0",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.2",
     "vuetify": "^1.4.4",
     "vuex": "^3.0.1",
     "weather-icons": "^1.3.2"
 }

.babelrc file code:

//.babelrc
  {
    "plugins": ["syntax-dynamic-import"]
  }

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!

[Justineo]

I'm not familiar with Laravel-mix. But as the author of Vue ECharts, I can see your issue is coming from this pacakge. Vue ECharts is not pre-compiled and you may need to explicitly configure webpack to let babel-loader handle it because node_modules may be excluded by default.