[FIXED] how to support Promises in Internet Explorer 11 using laravel mix?

Issue

I'm trying to figure out how to get laravel-mix to convert ES6 javascript code into javascript code Internet Explorer 11 can use.

I've setup a brand new laravel 9 project and made the following changes:

resources/js/app.js

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("done!"), 1000);
});

promise.then(
  result => alert(result),
);

Added to package.json

"browserslist": [
    "IE 11"
]

Added to resources/views/welcome.blade.php

<script type="text/JavaScript" src="{{ mix('js/app.js') }}"></script>

Finally

npm install
npx mix
php artisan serve

Code runs fine in Chromium but fails in Internet Explorer with error 'Promise' is undefined. How do I get laravel-mix to include a Promise polyfill?

Solution

You can also use a mix extension such as laravel-mix-polyfill

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

require('laravel-mix-polyfill');

mix.js('resources/js/app.js', 'public/js')
   .polyfill({
      enabled: true,
      useBuiltIns: "usage",
      targets: "firefox 50, IE 11"
   });

Answered By - Potato Science

Answer Checked By - Mary Flores (PHPFixing Volunteer)