Web Components scaffold not working in IE11

[kevinmpowell]

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: [src/generators/WEB-COMPONENTS] Missing dependency in generated application #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(R) Core(TM) 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.

[shilman]

FYI we're fixing a bunch of IE11-related issues right now in core -- hopefully they will also fix your issue! e.g. #10471

[kevinmpowell]

Thanks @shilman are those going to land in a 6.0 release or an upcoming 5.x release? Just trying to figure out your timeline to see if it works with my timeline.

[shilman]

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. #9311

[kevinmpowell]

@shilman is the 6.0.0 alpha build worth trying to see if the issue's already been fixed?

[shilman]

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

[shilman]

@kevinmpowell https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.43

[kevinmpowell]

@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?

[shilman]

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

[tooppaaa]

Just tried with latest alpha.
The web-component example in storybook doesn't work in IE 11 due "this is not an object Function" where some research on this leads to polyfills

I tried adding this to the preview-head.html but get an exceed stack issue (or IE being IE => very very slow)
I don't think I've set it correctly but there shoudn't be any issues like this @kevinmpowell
Manager is working fine in IE 11, Can't be sure for the preview of web-components but it works for other framework.

I can dig into making the web-component example working on IE 11

[shilman]

I think it's enough to get the manager working in IE11, and the preview is the user's responsibility. The more we can do get things working out of the box, the better, but definitely above and beyond the call of duty!

[kevinmpowell]

@shilman FWIW the manager does work in IE11 in the latest 5.x release, it's the preview that fails. That's the part I'd really like to see working. There are examples in the preview of the web components scaffold, and that's the part that wasn't working to me.

In the alpha the manager is also broken.

[ndelangen]

@kevinmpowell when I navigate to https://next--storybookjs.netlify.app/official-storybook/?path=/story/addons-a11y-basebutton--default in IE11 it works.

It's slow beyond believe, but it works.

How do you test this?

[kevin940726]

@ndelangen Are you tagging the wrong person here 😂?

[ndelangen]

sorry! 🙇

[kevinmpowell]

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

[ndelangen]

@kevinmpowell thank you for taking the time to create this.

That is very useful!

You've tried everything I'd suggest.. So I'm kinda stumped too. I posted in our discord, asking for help on this one.

Would you be able to test if this problem is actually also present on our 6.0.0-beta ?

[ndelangen]

The missing lit-html dependency is also something we can easily fix!

-wait here we go:

storybook/app/web-components/package.json

Line 56 in 0385c46

"lit-html": "^1.0.0",

You should have received a peerDependency warning?

Storybook kinda assumes you bootstrap it on an existing project, but really we should do better and add the peerDependencies, if we don't detect them being present.

We can check for existing dependencies and add new ones here in the CLI code:

storybook/lib/cli/src/generators/WEB-COMPONENTS/index.js

Lines 20 to 37 in 519fc1a

	const packageJson = await retrievePackageJson();
	packageJson.dependencies = packageJson.dependencies || {};
	packageJson.devDependencies = packageJson.devDependencies || {};
	packageJson.scripts = packageJson.scripts || {};
	packageJson.scripts.storybook = 'start-storybook -p 6006';
	packageJson.scripts['build-storybook'] = 'build-storybook';
	writePackageJson(packageJson);
	const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
	installDependencies({ ...npmOptions, packageJson }, [
	`@storybook/web-components@${storybookVersion}`,
	...babelDependencies,
	]);
	};

[daneah]

After using the scaffolding, I found that I still needed to add my own polyfill (e.g. <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/webcomponents-loader.js"></script>) to preview-head.html to get components to load in an older version of Edge. In IE11, even the manager doesn't load for me due to the untranspiled class Comparator @kevinmpowell mentions above.

[tooppaaa]

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]

@tooppaaa I know that we fixed this manager not working in IE11. The DLL is required.

I'm not confident we can port that fix to 5.x tbh, feels a bit risky to me. WDYT?

[shilman]

@ndelangen The issue says 5.3, but I believe--from comments in related issues--that this is also a problem in next. I think we should NOT be porting these fixes back to 5.3.

[ndelangen]

The manager UI not working in IE11 is fixed in next for sure.

[daneah]

I'd like to better understand if the transpilation errors mentioned above are due to us missing an expectation that the web components flavor of Storybook has of us, or if it's something that would need to be fixed at build/package time upstream before next is released.

[shilman]

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.9 containing PR #10725 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[daneah]

@shilman Thanks for the update! I am indeed able to load the manager in IE 11 with the scaffold now.

I'm unfortunately still seeing the same issue in my project as I've been seeing the last couple of releases (which could mean it's tangential to this issue). Here's what I'm seeing—happy to open a separate issue if you'd prefer!

The untranspiled lines in question appear to be from Storybook's bundled semver:

/***/ }),

/***/ 103:
/*!**************************************************************************!*\
  !*** ./node_modules/@storybook/ui/node_modules/semver/classes/semver.js ***!
  \**************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

const debug = __webpack_require__(/*! ../internal/debug */ 595)
const { MAX_LENGTH, MAX_SAFE_INTEGER } = __webpack_require__(/*! ../internal/constants */ 594)
const { re, t } = __webpack_require__(/*! ../internal/re */ 349)

[tooppaaa]

I'm looking at this.

[tooppaaa]

@daneah could you add
"resolutions": { "semver": "^7.3.2" }

What's hapening is:

• We know semer is es6
• A dedicated loader transpiles dependencies that are known to be es6
• Semver is not resolved to ^7.3.2 on a fresh bootstrap

So:
When using the DLL, the dependency is not found (version mismatch), it's not using the transpiled version from dll
Without the DLL, it tries to find storybook's version

Which leads to using semver from node_modules\@storybook\core\node_modules\semver\classes\comparator.js which is not transpiled...

[daneah]

@tooppaaa I'm happy to try that—I'm not positive where the line is supposed to go 😅

[tooppaaa]

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 !

[daneah]

Ah, that'd be why I'm not familiar. We're using lerna so I may need to do a little reading. Will report back!

[daneah]

Explicitly specifying "semver: "^7.3.2" in package.json and installing with npm did make things behave differently—the manager was able to load, but the browser choked and died trying to load the components. Wasn't able to get much info beyond that just yet, but if I find anything it seems it'd be a separate thread to discuss 😄 Thanks!

[tooppaaa]

Thanks for the feedback. I did find another way to avoid resolution. PR #10783 is under review.

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

[daneah]

Oh, that's great! I think that will be helpful in getting more people up and running with less fiddling 😄

We do have the polyfill loaded, so it may be something else! I should've been more specific about the issue—the loading spinner stays there and after a few moments IE11 says the page isn't responding. The whole IE11 interface becomes more or less unresponsive at that point.

[Niznikr]

As @daneah mentioned, seeing the loading spinner on IE11 and the page stops responding. This is happening on v6.0.0-beta.20 for me on virtualbox.

[tooppaaa]

@Niznikr Hello ! What's the console saying ?
I believe you now have to apply the IE 11 polyfills for the web components on your preview.

[Niznikr]

Hi @tooppaaa ! I do have the polyfills on my preview. I can't inspect the console because the page is unresponsive at the point in the screenshot.

[Niznikr]

Looks like a Out of stack space error coming from the polyfill. I am using this one:
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/webcomponents-loader.js"></script>

[Niznikr]

Followed this recommendation and adding <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> before the webcomponents polyfill seems to fix things.