Ask questionsSvelte applications fail to load in IE 11. Similar loading issue with the main site svelte.dev
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:
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:
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'
};
Related questions