Useful or not, from you.
svelte Svelte applications fail to load in IE 11. Similar loading issue with the main site svelte.dev

image

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)

image

IE version:

image

That's a useful answer
Without any help

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