Svelte: Using promises causes error with transpiled code in IE11

[roemhildtg]

IE is throwing an error on transpiled code. I'm using the svelte loader with webpack.

Package versions:

    "svelte": "^2.9.3",
    "svelte-transitions": "^1.2.0",
    "webpack": "^4.8.3",
    "svelte-loader": "^2.9.1",

One of my components looks like this:

{#if splicePromise}
    {#await splicePromise}
    <div class="loading loading-lg">Loading...</div>
    {:catch error}
    <p>Something went wrong...</p>
    {/await}
{/if}

I'm loading it like this:
import Graphfrom 'svelte-loader!./Graph/Graph.html';

Hereis what the output from the compiled component looks like:

Transpiled code output

"./node_modules/svelte-loader/index.js!./src/components/Graph/Graph.html": function (e, t, n) {
    "use strict";

    function r() {}

    function i(e, t) {
        for (var n in t) e[n] = t[n];
        return e
    }

    function o(e, t) {
        for (var n in t) e[n] = 1;
        return e
    }

    function a(e, t) {
        t.appendChild(e)
    }

    function s(e, t, n) {
        t.insertBefore(e, n)
    }

    function l(e) {
        e.parentNode.removeChild(e)
    }

    function u(e) {
        return document.createElement(e)
    }

    function c(e) {
        return document.createTextNode(e)
    }

    function d() {
        return document.createComment("")
    }

    function h(e, t, n) {
        e.addEventListener(t, n, !1)
    }

    function p(e, t, n) {
        e.removeEventListener(t, n, !1)
    }
    n.r(t);
    let f = {
        remaining: 0,
        callbacks: []
    };

    function v(e, t) {
        var n, r = t.token = {};

        function o(e, n, o, a) {
            if (t.token !== r) return;
            t.resolved = o && {
                [o]: a // error occurs here in IE
            };
//....

[Conduitry]

IE11 is no longer an officially supported platform as of version 2. Blog post; https://svelte.technology/blog/version-2 In general, you'll have to bring your own transpilation and polyfills.

But in particular, IE11 does not support promises according to caniuse. So, apart from what other code transforms you might need, you'll definitely need a promise polyfill.

[roemhildtg]

I can't get babel to transpile the code correctly though. Its keeping the code from the file insvelte shared.js and not even converting the arrow functions. I know this isn't necessarily the right place for babel questions but afaik I think I'm configuring it correctly. Do you happen to have a suggestion I can try?

{
            test: /\.svelte$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true,
                    sourceMap: true,
                },
            }, {
                loader: 'svelte-loader',
                options: {
                    emitCss: true,
                },
            }],
        },

[PaulMaly]

@roemhildtg I think you should put Babel-loader after svelte-loader and transpile already generated js output.

[roemhildtg]

Hey @PaulMaly I think webpack actually requires the loaders in reverse order for whatever reason.

[Conduitry]

@roemhildtg Can you share a small repo that has your webpack config and demonstrates the issue you're having?