Polymer lit-element web components not working in IE

Question

I have create custom web component using Lit-Element and it is working fine with Chrome, Firefox, Eadge, Opera but only not working in IE 11. I also tried to compile it into es5 but still no luck.

Error in IE console:

Webpack rule:

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          plugins: ['@babel/plugin-syntax-dynamic-import'],
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                targets: '>1%, not dead, not ie 11'
              }
            ]
          ]
        }
      }
    ]
  },

package.json

{
  "name":"pwa-conf-app",
  "main":"sw.js",
  "scripts":{
  "webpack":"webpack",
  "webpack-dev-server":"webpack-dev-server --history-api-fallback",
  "build":"npm run webpack -- --env.mode production --env.presets 
    serviceworker",
  "dev":"npm run webpack-dev-server -- --env.mode development",
  "dev:sw":"npm run webpack-dev-server -- --env.mode development  -- 
   env.presets serviceworker"
 },
  "keywords":[

 ],
 "devDependencies":{
  "@babel/core":"^7.1.5",
  "@babel/plugin-syntax-dynamic-import":"^7.0.0",
  "@babel/preset-env":"^7.1.5",
  "babel-loader":"^8.0.4",
  "babel-preset-minify":"^0.5.0",
  "clean-webpack-plugin":"^0.1.19",
  "copy-webpack-plugin":"^4.5.2",
  "css-loader":"^1.0.0",
  "html-webpack-plugin":"^3.2.0",
  "mini-css-extract-plugin":"^0.4.1",
  "style-loader":"^0.21.0",
  "webpack":"^4.23.1",
  "webpack-cli":"^3.0.8",
  "webpack-dev-server":"^3.1.4",
  "webpack-merge":"^4.1.3",
  "workbox-webpack-plugin":"^3.3.1"
 },
 "dependencies":{
  "@webcomponents/webcomponentsjs":"^2.1.3",
  "babel-preset-es2015":"^6.24.1",
  "lit-element":"^2.0.0"
 }
}

I check the error and it shows => functions. Arrow functions are not supported in IE. You said you had tried to compile it to ES5 but it looks like it did not complied for ES5 as arrow functions are still there or may be you missed some steps or files caused this error. — Deepak-MSFT, Oct 04 '19 at 13:23

Jordan Daigle · Answer 1 · 2020-01-24T01:24:34.617

You need to transpile lit-element and lit-html :

module: {
rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
      plugins: ['@babel/plugin-syntax-dynamic-import'],
      presets: [
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'usage',
            targets: '>1%, not dead, not ie 11'
          }
        ]
      ]
    }
  },
  {
    test: /node_modules(?:\/|\\)lit-element|lit-html/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env']
      }
    }
  }
]
},

EDIT: And you will probably need to include "webcomponents-bundle.js"

and maybe @babel/polyfill

Polymer lit-element web components not working in IE

1 Answers1