IE 11 error

[zoamel]

Hi! I am trying to use this great library inside the liv that I am building, but unfortunately, I need to support IE 11 but I have some issues with building the final bundle.

I am using rollup library with the following config:

export default [
  {
    input: 'src/index.js',
    output: {
      name: 'my-lib',
      file: 'dist/my-lib.umd.js',
      format: 'iife',
      sourcemap: !production,
    },
    onwarn: function(warning) {
      if (warning.code === 'THIS_IS_UNDEFINED') {
        return
      }

      console.error(warning.message)
    },
    plugins: [
      production &&
        clear({
          targets: pkg.files,
        }),
      production &&
        copy({
          targets: [{ src: ['./demo/template/index.html'], dest: './demo' }],
          verbose: true,
          hook: 'buildStart',
        }),
      !production &&
        copy({
          targets: [{ src: ['./index.html'], dest: './dist' }],
          verbose: true,
          hook: 'buildStart',
        }),
      replace({
        exclude: 'node_modules/**',
        'process.env.NODE_ENV': production
          ? JSON.stringify('production')
          : JSON.stringify('development'),
      }),
      stylelint({
        fix: false,
        include: ['src/**.js'],
        quiet: false,
      }),
      eslint({
        exclude: ['src/styles/**'],
      }),
      babel({ exclude: ['node_modules/**'] }),
      resolve({ browser: true }),
      commonjs(),
      globals(),
      builtins(),
      production && terser(),
      production &&
        clear({
          targets: ['./demo/dist'],
        }),
      filesize(),
      !production &&
        serve({
          contentBase: pkg.files[0],
          port: 3000,
          verbose: true,
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Headers': '*',
          },
        }), // index.html should be in root of project
      !production &&
        livereload({
          exts: ['html', 'js'],
          watch: pkg.files[0],
        }),
      production &&
        copy({
          targets: [
            { src: ['./dist/**/*', '!**/*.html'], dest: './demo/dist' },
          ],
          verbose: true,
          hook: 'writeBundle',
        }),
      stringReplacer({
        files: ['./dist/index.html', './demo/index.html'],
        from: /\${timestamp}/g,
        to: Date.now(),
      }),
    ],
  },
]

and my babelrc is looking like that:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    [
      "emotion",
      {
        "sourceMap": false,
        "cssPropOptimization": true
      }
    ]
  ]
}

Inside a project I am doing imports like that import { Component } from 'hyperhtml/esm'

On modern browsers everything works fine, but on IE 11 I am getting error: Expected identifier for the line const {Component, bind: bind$1, define, diff, hyper, wire} = hyperHTML;

[WebReflection]

const {Component, bind: bind$1, define, diff, hyper, wire} = hyperHTML;

that is invalid syntax for IE11, you need to transpile the code.