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 ***@***.***> 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 <#2621 (comment)>, 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 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.

[benjazehr]

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: webcomponents/webcomponents-platform#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.