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

+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.

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:

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.

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.

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.

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'
};

@davidmoshal

1. https://github.com/ifahrentholz/svelte-3-ie11
2. https://mvolkmann.github.io/blog/topics/#/blog/svelte/supporting-ie11/

IE support is for react and co

@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

IE 11 is heavily entrenched in corporate USA.

The reason is because of significant prior investment in ActiveX components.

In other words:

1. Numerous Fortune 1000 companies have no option but to run their ActiveX components in IE 11.

2. When these companies standardize on a single browser, that browser is IE 11.

3. Many of these companies do standardize on a single browser.

4. It's unlikely that the Active X based applications will be replaced in the foreseeable future.

Therefore:

lack of IE11 support essentially disqualifies Svelte for use in some very large companies at this time.

No plainer way to put it, unfortunately.

Request:

* a way to generate two applications: one optimized for IE11, and the other optimized for other browsers.

I thought that’s why the new Edge (Chromium) has an “Internet Explorer Mode”. I don’t think it is the responsibility of every framework to make sure it works in a 7 years old browser. That’s babel’s job.

@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.

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.

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.

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.