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

Question

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?

Answer 1

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"
   });

Answer 2

If you don't mind skipping integration with laravel-mix, you can just add this in the blade view/layout:

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>

Otherwise, you can try adding in resources/js/bootstrap.js (untested):

window.Promise = require('promise-polyfill').default;