storybook: Web Components scaffold not working in IE11

Describe the bug The web components storybook scaffold does not work in IE11.

To Reproduce Steps to reproduce the behavior: Follow guide here: https://github.com/storybookjs/storybook/blob/4c64cdc0aca7d7485981f2fe766d6585112b28e1/app/web-components/README.md

  1. cd my-app
  2. npx -p @storybook/cli sb init -t web_components
  3. npm install lit-html - existing bug documents this: https://github.com/storybookjs/storybook/issues/9845
  4. npm run storybook
  5. Attempt to access the running storybook instance in IE11.

Expected behavior I expected the examples to work in IE11.

Screenshots Full video walkthrough of me scaffolding a project form scratch and testing in IE11: https://youtu.be/olcRZZAPvfw

Code snippets If applicable, add code samples to help explain your problem.

System: Environment Info:

System: OS: macOS Mojave 10.14.5 CPU: (8) x64 Intel® Core™ i7-6820HQ CPU @ 2.70GHz Binaries: Node: 12.14.1 - /usr/local/bin/node Yarn: 1.15.2 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Browsers: Chrome: 83.0.4103.14 Firefox: 74.0.1 Safari: 12.1.1 npmPackages: @storybook/web-components: ^5.3.18 => 5.3.18

Additional context Add any other context about the problem here.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 1
  • Comments: 38 (22 by maintainers)

Most upvoted comments

sorry! 🙇

Thanks for the feedback. I did find another way to avoid resolution. PR https://github.com/storybookjs/storybook/pull/10783 is under review.

You still need to add the WebComponents polyfill to the preview yourself. Hope that helps

In your package.json 😃 Then do a yarn. There seems to be something equivalent concerning npm but nothing built-in apparently. I’m still trying to figure out a solution to avoid the use of resolutions !

I’m looking at this.

I guess we can add this when using the cli to scaffold a new project.

I created #10630 to add the lit-html dependency.

However I do reproduce the IE 11 not using the dll, I’ll try to undestand why

@ndelangen I walk through the process here: https://youtu.be/olcRZZAPvfw

cc @ndelangen @tooppaaa IE11 - the gift that keeps on giving

@shilman it’s still broken, looks like all the source isn’t being compiled down to ES5. Is there a legacy mode I need to enable somewhere to support IE11? Some babel config or something?

Screen Shot 2020-04-24 at 9 12 07 AM Screen Shot 2020-04-24 at 9 12 02 AM

@kevinmpowell wait for the next alpha, which should be ready in the next 12h

They’re big changes (tho maybe not technically breaking) so probably not in 5.3. 6.0 is going into beta this week, and targeting late May for a final release. https://github.com/storybookjs/storybook/issues/9311