Hiện tại bên mình đang có 1 dự án code = Laravel Framework 5.6. Hôm nay bị khách hàng feedback về vụ Sweetalert2 không hoạt động được trên IE 11, trong khi Chrome, Firefox thì vẫn ngon lành cành đào. Khách hàng toàn dùng Chrome cơ mà tự nhiên hôm nay đến ngày nên dùng IE 11 
Sau khi Github issues thần chưởng thì mình tìm được 3 related issues tương tự sau:
- Promise not defined in IE 11 #436
- [Suggestion] Adding polyfills on demand to the bundle. #564
- Sweetalert2 not working properly on IE11 on Windows 10 Pro v1709 #701
Ngay trên tài liệu của Sweetalert2 cũng đề cập vấn đề này:
<script src="sweetalert2/dist/sweetalert2.all.min.js"></script>
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support -->
<script src="https://unpkg.com/promise-polyfill"></script>
Tuy nhiên mình có thử và đ** thành công 
. Cụ thể sau 1 quá trình compile bởi Laravel-mix (Webpack) thì file app.js sinh ra và sử dụng nhiều function mà IE 11 không hỗ trợ. Vì thế chúng ta cần thêm polyfill vào khi mix file.
Nếu bạn còn đang thắc mắc Polyfill là clgt thì hãy đọc giải thích sau nhé:
A polyfill is a browser fallback, made in JavaScript, that allows functionality you expect to work in modern browsers to work in older browsers, e.g., to support canvas (an HTML5 feature) in older browsers.
Cụ thể là rất nhiều method hoặc function trên bundle file được viết theo ES6 (chẳng hạn) mà không được IE 11 hỗ trợ. Sau khi thêm thư viện Polyfill này vào nó sẽ check thêm function/method đó có tồn tại ko mới chạy, hoặc sử dụng function/method thay thế hoạt động trên IE 11. Chúng ta cũng có thể tự viết thư viện Javascript Polyfill của riêng mình, hãy tham khảo bài viết sau.
Trở lại vấn đề cần giải quyết, tóm cái váy lại để file app.js hoạt động tốt trên IE 11 ta cần thêm thư viện Polyfill vào, ở đây mình sử dụng: babel-polyfill
Bước 1
Cài đặt và babel-polyfill & babel-preset-es2015
$ yarn add -D babel-polyfill babel-preset-es2015
Bước 2
- Tạo file
.babelrccùng cấp với filewebpack.mix.jstrên thư mục dự án.
{
"presets": [
"es2015",
["env", {
"modules": false,
"targets": {
"browsers": ["> 2%"],
"uglify": true
}
}]
]
}
- Sửa lại file
webpack.mix.js, thêmoptionssau vào
const { mix } = require('laravel-mix')
// ...
mix.options({
polyfills: [
'Promise'
]
})
// ...
Bước 3
Gọi tới package trong resources/assets/js/app.js
// ...
require('babel-polyfill');
// ...
Bước 4
Compile lại và tận hưởng thành quả trên IE 11 
$ yarn run dev