Syntax Error in datatables.js in IE11

[ra2410]

Hi, I'm trying to use the datatables-bundle in my symfony project. In Firefox, Edge and Chrome, the bundle loads properly and the datatable is displayed. In IE11 I get the error message: "Syntax Error datatables.js Line 39" return new Promise ((fulfill, reject) => {" and the datatable is not loaded.

This is my code:

<script src="{{ asset('bundles/datatables/js/datatables.js') }}"></script>

<script>
    $(function () {
        $('#city).initDataTables({{ datatable_settings(city) }} , {
            searching: true,
            language: {
                url: "{{ asset('media/datatable_translation.json') }}"
            }
        });
    });
</script>

What can I do to load the page in IE11?

[MaximePinot]

Hi,

IE11 does not support Promise. You need to use a polyfill.

[ra2410]

The polyfill helps with the Promise problem. Many Thanks.

Unfortunately IE11 does not understand the arrow syntax in Line 39: "return new Promise ((fulfill, reject) => {". That's why I had to rewrite the file /public/bundles/datatables/js/datatables.js.

return new Promise(function (fulfill, reject) { // Perform initial load $.ajax(config.url, { method: config.method, data: { _dt: config.name, _init: true } }).done(function (data) {....

Now the bundle works in IE11. The solution is not nice, because I change the original code.

Does anyone know a better solution?

[MaximePinot]

A better solution would be to load the asset through Webpack Encore. Babel is automatically configured so it will convert ES6 code into ES5 code which is supported by older browsers (including IE11).

[ra2410]

Thank you very much.

[curry684]

We indeed do not actively support ancient browsers on purpose - I knew I was breaking IE11 when I used arrow syntax there instead of a regular closure.

If ancient IE-browsers are a requirement, which they shouldn't be in 2019, our stance is indeed "bring your own polyfills and transpiler, we do last 2 years of browser versions".