Svelte + Babel (on Webpack) don't render elements

Question

I'm working on a MVC project with:

Svelte (3) components
Webpack (3)
Babel (7).

On webpack, with this settings:

{
    test: /\.svelte$/,
    use: ['svelte-loader']
},

my components are rendered properly on Chrome and Firefox and Edge, but the latter breaks if I use the spread operator inside the svelte script. Also the components are not rendered on IE11.

Changing to:

{
    test: /\.svelte$/,
    use: ['babel-loader', 'svelte-loader']
},

it transpliles to ES5 the svelte script (I checked the bundle in the DevTool) but it doesn't render the component on any browser without returning any error. In the same bundle I can see that the file index.mjs (in node_modules/svelte) is not in ES5, but I'm not able to let it transpile (check the code below).

This is the settings in webpack.config.js:

  module: {
    rules: [
      {
        test: /\.m?js$/,
        include: [/svelte/],
        use: ['babel-loader']
      },
      {
        test: /\.svelte$/,
        use: ['babel-loader', 'svelte-loader']
      },
      {
        test: /.(js|jsx)$/,
        include: [path.resolve(__dirname, 'src')],
        use: [
          {
            loader: 'babel-loader'
          },
          {
            loader: 'eslint-loader',
            options: {
              exclude: /node_modules/
            }
          }
        ]
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefix()]
            }
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['././node_modules']
            }
          }
        ]
      },
      {
        test: /\.(gif|png|jpe?g|JPG?g)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              disable: true
            }
          }
        ]
      },
      {
        test: /\.(ico)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              disable: true
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]'
          }
        }
      }
    ]
  },

these are babel's settings:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "ie": "11"
                },
                "forceAllTransforms": true,
                "useBuiltIns": "usage",
                "corejs": {
                    "version": 3,
                    "proposals": true
                }
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}

I need to have my app running on IE11.

* UPDATE 16/09/2019 *

Changing from Babel to Buble it works perfectly on Chrome and Edge, but not in IE11, so Buble it's not the solution.

On this blog: http://simey.me/svelte3-rollup-and-babel7/ into the "ISSUES" section, it describes exactly what is happening to me. Unfortunately its solution is not working for Webpack.

Ale Ale · Accepted Answer · 2019-09-17T10:46:21

FYI: I solved this issue in 3 (main) steps:

1) In "webpack.config.js" I had to change: "optimization" -> "splitChunks" -> "chunks" from "all" to "async"

optimization: {    
    splitChunks: {
      chunks: 'async',
      ...
    }
  },

With "all" it didn't render the components at all (but there is a massive chance that I meed up with the configs somewhere).

2) I've installed "document-register-element" module and imported in the main.js. Ref: https://github.com/WebReflection/document-register-element#how

3) I've installed " whatwg-fetch" module and changed the svelte "fetch" with "window.fetch" after importing the library. Ref: https://www.npmjs.com/package/whatwg-fetch

Now it works properly on IE11.

Svelte + Babel (on Webpack) don't render elements

2 Answers