profile
viewpoint

Ask questionsSvelte 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

sveltejs/svelte

Answer questions 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'
};
useful!

Related questions

Javascript Interpolation in Styles via CSS Variables? hot 2
Uncaught TypeError: y.fragment.l is not a function hot 1
Increase elements when using a combination of await block and transition hot 1
Change body class via <svelte:body /> hot 1
Site: Svelte Cookbook/ Examples hot 1
Missing dependencies in svelte/compiler type definitions hot 1
Multiple components in one file - svelte hot 1
onMount Error: Function called outside component initialization hot 1
A way to see if slot prop is present hot 1
slot inside #if inside #each : TypeError cannot read property 'd' of null hot 1
unclear / difficult to import uuidv4 hot 1
Use <script type="application/ld+json"> in <svelte:head> hot 1
Error: 'default' is not exported when using babel + moment hot 1
Outros undefined when transitioning to another page hot 1
Incorrect error message &#34;... received an unexpected slot &#34;default&#34;. - svelte hot 1
Github User Rank List