Storybook with Polymer does not work in Internet Explorer 11

[michael-breazeale]

Describe the bug 🔍

Unable to view storybook polymer example on Internet Explorer 11. This also occurs on local, but since it's presenting on the example that seems to be the best place to focus.

To Reproduce 💥

Steps to reproduce the behavior:

1. Open IE 11 (My version is 11.950.17134.0)
2. Open Developer console if you want to see the errors in the log.
3. Go to 'https://storybooks-polymer.netlify.com/'
4. See error

Expected behavior ✨

The working story book that shows in Chrome.

Screenshots 📸

With chrome we see:

Context👨‍💻

• Device: Computer/PC
• OS: Windows 10 Enterprise (Version 1803 Build 17134.95)
• Browser: Internet Explorer 11
• Browser version: 11.950.17134.0
• Storybook Version: 5.1.11

[michael-breazeale]

#7093 #7263 And other IE 11 issues might help. I think there must be some missing polyfills. I've tried the workaround in #4099 with no success (but I didn't expect that since it's from v4).

[shilman]

Which version of storybook are you running? I think the netlify deploys are outdated (cc @ndelangen)

[michael-breazeale]

@shilman Storybook 5.1.11

[michael-breazeale]

In testing, I created an empty storybook project.

npx -p @storybook/cli sb init

Selected Polymer manually.

Manually added lit-element because it's not added via the init, resulting in the following package.json:

{
  "dependencies": {
    "lit-element": "^2.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@storybook/polymer": "^5.1.11",
    "babel-loader": "^8.0.6",
    "polymer-webpack-loader": "^2.0.3"
  },
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  }
}

Even with an empty index.stories.js

I see this in Internet Explorer:

And this in Chrome:

[michael-breazeale]

It may be related to this lit-html issue: lit/lit#873

[michael-breazeale]

I was able to get the error to go away in IE 11 with the webpack config in this issue:

#7084 (comment)