Svelte: Svelte applications fail to load in IE 11. Similar loading issue with the main site svelte.dev

[tridattran]

Digging closer the error is on this line:

const identity = x => x;

I suspect I need a polyfill but there doesn't seem to be an appropriate one.
Svelte version: 3.0.0

The home page: https://svelte.dev/ gives this error:
(as of 30/04/2019)

IE version:

[EmilTholin]

If you want to support IE11 you must transpile the code to syntax that it supports and add a Promise polyfill.

svelte.dev is not transpiled with IE11 in mind (e.g. => is not allowed), and I don't think any polyfills needed to make shimport work in IE11 are included either.

Should IE11 be supported for svelte.dev?

[thgh]

I would expect svelte.dev to enable the legacy build.

[Conduitry]

It does, but apparently it's not doing its job correctly. Might need to dig into some Babel stuff - which might be helpful if it means we can improve configuration in sapper-template.

However, even with that ironed out, the site uses CSS variables all over the place, which no amount of Babeling is going to help. I'm undecided whether making the site work on IE11 is an important goal.

[tridattran]

Thanks, I will give this a try.

On Wed, May 1, 2019, 4:52 AM Pavish Kumar R [e-mail]
wrote:

Currently, I am using babel to transpile the code and then I manually add
polyfills to get it working on IE 10 and 11. I haven't faced other IE
specific issues so far. Pollyfills include:
Map, Set (Taken from pollyfill.io)
Promise (rsvp.js library, set global Promise variable to RSVP.Promise)

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/sveltejs/svelte/issues/2621#issuecomment-488071490,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABREKZPDW5GCTVQ6ACXD4Y3PTCIPZANCNFSM4HJJHJ2Q
.

[rob-balfre]

+1 for IE11 support, it's still widely used in some corners of the globe (wish it wasn't but it is). We use a Svelte CSS variables pre-processing step in our workflow that works well.

[tridattran]

I'm going to close this issue. As suggested above, with the correct polyfills, svelte can be made to work in IE.

For anyone interested, this is my webpack.config.js is below.

The important updates are:

• '@webcomponents/custom-elements' to support custom elements.
• babel loader (that also looks for .svelte files).

```const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';

module.exports = {
entry: {
bundle: [
'@webcomponents/custom-elements',
'./src/main.js'
]
},
resolve: {
extensions: ['.mjs', '.js', '.svelte', '.css']
},
output: {
path: __dirname + '/public',
filename: '[name].js',
chunkFilename: '[name].[id].js'
},
module: {
rules: [
{
test: /(.m?js?$)|(.svelte$)/,
exclude: /\bcore-js\b/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: {
"browsers": [
"ie >= 10"
]
},
useBuiltIns: "usage",
corejs: 3
}]
],
plugins: [
// '@babel/plugin-proposal-class-properties',
// '@babel/plugin-transform-shorthand-properties'

                ],
                sourceType: 'unambiguous'
              }
            }
          },
        {
            test: /\.svelte$/,
            exclude: /node_modules/,
            use: {
                loader: 'svelte-loader',
                options: {
                    emitCss: true,
                    hotReload: true
                }
            }
        },
        {
            test: /\.css$/,
            use: [
                /**
                 * MiniCssExtractPlugin doesn't support HMR.
                 * For developing, use 'style-loader' instead.
                 * */
                prod ? MiniCssExtractPlugin.loader : 'style-loader',
                'css-loader'
            ]
        }
    ]
},
mode,
plugins: [
    new MiniCssExtractPlugin({
        filename: '[name].css'
    })
],
devtool: prod ? false: 'source-map'

};
```

[mrPrateek95]

It does, but apparently it's not doing its job correctly. Might need to dig into some Babel stuff - which might be helpful if it means we can improve configuration in sapper-template.

However, even with that ironed out, the site uses CSS variables all over the place, which no amount of Babeling is going to help. I'm undecided whether making the site work on IE11 is an important goal.

@Conduitry Does that mean the 'legacy' compile flag is supposed to transpile ES6 features like arrow functions and such but isn't for some reason at the moment?

[pavish]

@mrPrateek95 I believe legacy compile flag doesn't transpile ES6 features, rather it changes the code to not use api not present in older browsers, such as dataset.
The reason there are issues like arrow functions not transpiling correctly is because babel doesn't seem to be doing its job right. It works if I use babel-cli and transpile files manually, but babel-loader with webpack seems to produce those issues.

[angelozehr]

For those working with rollup – there's also a way to do it without webpack. I had exactly the same requirement on a project. As I did not find much online, I wrote this blogpost about how I solved it. The trick is to add es6-shim or core-js for polyfilling. I recommend working with the latter (and babel). My rollup config now looks like this:

import babel from 'rollup-plugin-babel';

export default {
  …
  plugins: [
    …,
    // compile to good old IE11 compatible ES5
    babel({
      extensions: [ '.js', '.mjs', '.html', '.svelte' ],
      runtimeHelpers: true,
      exclude: [ 'node_modules/@babel/**' ],
      presets: [
        [
          '@babel/preset-env',
          {
            targets: '> 0.25%, not dead',
            useBuiltIns: 'usage',
            corejs: 3
          }
        ]
      ],
      plugins: [
        '@babel/plugin-syntax-dynamic-import',
        [
          '@babel/plugin-transform-runtime',
          {
            useESModules: true
          }
        ]
      ]
    }),
    production && terser()
  ],
  …
}

I acutally copied this from sapper. Make sure you add babel or bublé before the terser and after the svelte-loader.

[swapneshran]

@angelozehr tried to run the app. Still I am getting some error.

[mrPrateek95]

@swapneshran
This is because IE 11 doesn't support Web Components Custom Elements.

You will need to add that plugin in your babel configuration.

This link should help:
https://github.com/github/babel-plugin-transform-custom-element-classes

[assmith]

Sorry for appending to a closed thread, but since this is the first hit that comes up when looking for IE11 and Sapper issues I thought I should post here. Sapper uses document.baseURI in _goto_ and _prefetch_ which isn't supported in IE11 and doesn't appear to be polyfilled by Babel or polyfill.io.

TypeError: Invalid scheme

is a hint that this might be biting you.

I found this patch which works for me when added to template.html along with the polyfill.io polyfills mentioned in Usage of shimport makes legacy support prohibitively challenging

source: https://github.com/webcomponents/webcomponents-platform/issues/2

if ('baseURI' in Node.prototype === false) {
  Object.defineProperty(Node.prototype, 'baseURI', {
    get: function() {
      var base = (this.ownerDocument || this).querySelector('base');
      return (base || window.location).href;
    },
    configurable: true,
    enumerable: true
  });
}

Maybe a polyfill for this could be added to --legacy builds automatically in a future release?

[antony]

You can examine the modified Sapper build I made at https://github.com/antony/sapper-ie to determine what pollyfills/rollup config you will need for IE11/Edge support for your own code.

I don't think time should be wasted making the Svelte website work in an obsolete browser (IE11) - anybody using that browser is not the target audience of the Svelte website. Lets focus on more important issues.

[assmith]

Thanks @antony, I'll checkout your project. While I'm happy for svelte/sapper to not consider IE a target market (who would if given a choice) I wish it were true that IE was obsolete, unfortunately that just isn't the case.

I realise global/general browser stat counters will tell you it is and if you're building a website for a tween popstar then you're probably right on the money but anyone building B2B apps, particularly if it's for big organisations or government, just don't see what you see. Here are some login stats for one of my projects for the last 6 months:

| Browser | Logins |
| --- | --- |
| IE | 54,131 |
| Chrome | 46,191 |
| Safari | 17,436 |
| Edge | 13,747 |
| Samsung Browser | 4,233 |
| Firefox | 4,166 |

I realise that part of this thread refers specifically to the svelte website and I wholeheartedly agree that that doesn't need to support IE11, but plenty of developers like myself still do and would like to use Svelte/Sapper. Polyfills are fine, but I couldn't find one for baseURI, so I posted it here to help others.

[antony]

I'm not denying the need for IE11 support. I spent weeks figuring out how to get Sapper to support it (hence the project I linked above).

Please don't confuse the terms obsolete and unused - the browser has been abandoned by Microsoft, it receives only critical security updates, it is obsolete. I'm not denying it has a userbase, especially in slow-moving corporates and B2B. Luckily we don't have to deal with those as a general rule.

I am recommending that the Svelte website doesn't support IE. However, I would encourage Svelte website support for IE if it is a way of dogfooding ongoing legacy browser support.

[srconklin]

Finally someone articulates it very nicely...thanks @assmith! I get tired of millennials thinking that IE is dead and that it can be completely ignored.
I run a cloud-based investment recovery software service used mostly by F500 companies and almost every one of them are only allowed to run IE11. (still have users in remote warehouses who are on windows 7..)
https://medium.com/@burger.neal/the-end-of-life-of-internet-explorer-11-12736f9ff75f

So thanks for posting the help here on finding the polyfils, very helpful!

[LaughingBubba]

@angelozehr thanks for calling out buble. Now my dinky little website for a friend (the ppl she deals with are corporates and tradies ...) works with IE with nothing more than:

  import buble from 'rollup-plugin-buble';

  ...

  !production && livereload('public'),

  // BABEL like transpilation for Edge and IE11 browsers (splitters!)
  buble({
    objectAssign: 'Object.assign',
  }),

  production && terser()

NB: The objectAssign option is for handling spread operators.

[quantuminformation]

IE support is for react and co

[fabian-michael]

Hey, I had the same error in IE11 and stacked buble on top of babel. It's a bit ugly and may be pretty unperformant in larger scale but buble transpiles everything what babel doesn't. I have no clue why babel is not transpiling that but for now its working fine.

EDIT:
I am not using buble alone because of async arrow functions which buble does not suppor.

```
webpack.config.js
{
test: /(.m?js?$)|(.svelte$)/,
exclude: /\bcore-js\b/,
use: [
'buble-loader',
'babel-loader'
]
}

.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
]
}

[fabian-michael]

Ok the problem seems to occur when using .babelrc
Change your babel configuration to babel.config.js and tell the babel-loader to use this config.
I did it and now it's working perfectly fine with.

https://github.com/babel/babel/issues/8672#issuecomment-420168497

[varun-etc]

Hi @Mycl95 @tridattran

I tried with the workaround suggested in below comments link but still getting error for IE 11.

(https://github.com/sveltejs/svelte/issues/2621#issuecomment-489071454, https://github.com/sveltejs/svelte/issues/2621#issuecomment-580712875)

Sample repo https://github.com/varun-etc/sample_web_comp_ie or git clone https://github.com/varun-etc/sample_web_comp_ie.git

My webpack.config.js file.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

const mode = process.env.NODE_ENV || 'development';

const prod = mode === 'production';

module.exports = {
    entry: {
        bundle: !prod
            ? ['@webcomponents/custom-elements', './src/main.js']
            : ['@webcomponents/custom-elements', './src/components/components.module.js'],
    },
    resolve: {
        alias: {
            svelte: path.resolve('./node_modules', 'svelte'),
        },
        extensions: ['.mjs', '.js', '.svelte', '.css'],
    },
    output: !prod
        ? {
                path: __dirname + '/public',
                filename: 'bundle.js',
                chunkFilename: 'bundle.[id].js',
          }
        : {
                path: __dirname + '/lib',
                filename: 'index.js',
          },
    module: {
        rules: [
            {
                test: /(\.m?js?$)|(\.svelte$)/,
                exclude: /\bcore-js\b/,
                  loader: 'babel-loader',
                    options: {
                        babelrc : false,
                        configFile: path.resolve('babel.config.js'),
                    },
                    include: [
                      path.resolve('src'),
                      path.resolve('test'),
                      //path.resolve('node_modules/webpack-dev-server/client'),
                      //path.resolve('node_modules/@util/qcmagic')
                    ]
              },        
            {
                test: /\.svelte$/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        emitCss: true,
                        hotReload: !prod,
                        dev: !prod,
                        customElement: true,
                    },
                },
            },
            {
                test: /\.css$/,
                use: [
                    /**
                     * MiniCssExtractPlugin doesn't support HMR.
                     * For developing, use 'style-loader' instead.
                     * */
                    prod ? MiniCssExtractPlugin.loader : 'style-loader',
                    'css-loader',
                ],
            },
            {
              test: /\.(png|svg|jpg|gif)$/,
              use: [
                'file-loader',
              ],
            },  
        ],
    },
    mode,
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
    ],
    devtool: prod ? false : 'source-map',
};

bable.config.js file.

module.exports = function (api) {
    console.log("babel.config log !!!");
  api.cache(true);
  const presets = [
    [
      '@babel/preset-env',
      {
            targets: {
      ie: 11
    }, 
        modules: false,
        useBuiltIns: 'usage'
      }
    ]
  ];
  const plugins= [
    [
      '@babel/plugin-transform-runtime', {
      corejs: 2,
      helpers: true,
      regenerator: true,
      useESModules: false
    }
    ]
  ];
  return {
    presets,
    plugins
  }
}

but still getting same error in IE 11, can somebody share sample working svelte app with webpack config & custom elements.

[sno2]

If you want to support IE11 you must transpile the code to syntax that it supports and add a Promise polyfill.

svelte.dev is not transpiled with IE11 in mind (e.g. => is not allowed), and I don't think any polyfills needed to make shimport work in IE11 are included either.

Should IE11 be supported for svelte.dev?

Does a website for developers, coders, and tech geeks really need to support IE?

[MarkFereday]

I've just written a small website in Svelte as a test case. We need to support IE11 as many large corporations still have IE11 as their main supported browser. Lots of banks do, telecomms companies etc. Regardless of whether people think Svelte is for "developers, coders, and tech geeks", to get acceptance in large clients it needs IE11 support. Banks have 1000s of Win7 laptops/PCs in used globally, IE11 is going to be around for a while yet in the real world.

I've wasted hours today trying to get it to work in IE11.

[silllli]

I've just written a small website in Svelte as a test case. We need to support IE11 as many large corporations still have IE11 as their main supported browser. Lots of banks do, telecomms companies etc. Regardless of whether people think Svelte is for "developers, coders, and tech geeks", to get acceptance in large clients it needs IE11 support. Banks have 1000s of Win7 laptops/PCs in used globally, IE11 is going to be around for a while yet in the real world.

I've wasted hours today trying to get it to work in IE11.

It is possible. Look at this repo by @antony that he mentioned earlier in this issue: https://github.com/antony/sapper-ie.

I’ve used it myself and it works.

[quantuminformation]

I'll get into more trouble if I post my opinion on ie🦕🦕 again ;)

[quantuminformation]

The thing is Svelte has a lot of competition and if ie11 support makes add bloat (and take core team dev time) the lightweight output that's gonna hurt long term. Happy if others find a solution though.

[varun-etc]

@MarkFereday @silllli @quantuminformation Just transpile your code as shown in this example using babel with transorm_class and custom_element_class plugins Sample code in babel., also include polyfills listed below in your main page were you are trying to include your web components.

<script src="https://polyfill.io/v3/polyfill.min.js"></script>
<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>

[antony]

I've just written a small website in Svelte as a test case. We need to support IE11 as many large corporations still have IE11 as their main supported browser. Lots of banks do, telecomms companies etc. Regardless of whether people think Svelte is for "developers, coders, and tech geeks", to get acceptance in large clients it needs IE11 support. Banks have 1000s of Win7 laptops/PCs in used globally, IE11 is going to be around for a while yet in the real world.

I've wasted hours today trying to get it to work in IE11.

We are aware that people need to support IE11. Myself included. That's why I wrote the sapper-ie project. The sapper and svelte templates themselves have smaller, more limited, but working Babel config also.

Is transpilation / supporting unmaintained browsers part of Svelte's responsiblity? No. Svelte's job is to output modern Javascript.

Is it the job of Babel? Yes. Does the recommended tool for bundling Svelte have first class support for Babel? Yes.

So I really don't think there is anything to do here.

[MarkFereday]

I've just written a small website in Svelte as a test case. We need to support IE11 as many large corporations still have IE11 as their main supported browser. Lots of banks do, telecomms companies etc. Regardless of whether people think Svelte is for "developers, coders, and tech geeks", to get acceptance in large clients it needs IE11 support. Banks have 1000s of Win7 laptops/PCs in used globally, IE11 is going to be around for a while yet in the real world.
I've wasted hours today trying to get it to work in IE11.

It is possible. Look at this repo by @antony that he mentioned earlier in this issue: https://github.com/antony/sapper-ie.

I’ve used it myself and it works.

Thanks, that's the link I found last night and that helped me, got it working 1am last night. Happy-ish now, personally I think a link to that from the docs would be good. Nearly everything I have worked on in the last x years requires IE11 support even though we all know the arguments against IE11. These are big companies, can't argue against stupid.

p.s. nothing above reduces my enjoyment of using Svelte, just frustration at IE11.

[antony]

I don't really want the IE fork to be an official project and I don't want to maintain it. I'll think about how we can better direct people via the FAQ or something though.