Storybooks not working on IE11

[tomleah]

What package(s) are you using?

Wanting to use the react storybook but Angular and Vue also don't work.

Detailed description

In Internet Explorer 11 I am unable to load the react storybook to access the docs.

We are having trouble supporting the DataTable in IE11 so wanted to check the storybook/docs to see if we can reproduce the problem there.

What version of the Carbon Design System are you using?

The storybook is for carbon-components-react v7.37.1

Steps to reproduce the issue

1. Visit the React storybook on IE11

Additional information

Screenshot of browser console

[szdominik]

We have very similar problem: is it possible that the latest carbon version is not working on IE11?

As far as I see, the main problem is in the feature-flags package:

carbon/packages/feature-flags/src/FeatureFlagScope.js

Line 8 in 729f5c1

export class FeatureFlagScope {

Class syntax is not known by IE11 (https://caniuse.com/es6-class) and I'm not sure that this package uses or not any polyfill.

[emyarod]

this may be resolved by auto polyfilling class syntax in the feature-flags package as suggested. do you know the last working version which was viewable in storybook? currently, viewing older storybook deploys shows content security errors so it's not clear when the breakage occurred

[joshblack]

Seems like it may be something webpack-related, potentially with one of our CSS loaders. When debugging, I removed all stories and still got an error when styles were trying to be loaded 🤔

[szdominik]

I've investigated a few things - nothing surprising, but it could be useful for your debugging process.

I checked the following versions and the Carbon ecosystem is still broken with the same error (syntax error because of class usage) on IE11.

    "carbon-components": "10.34.0",
    "carbon-components-react": "7.34.0",
    "@carbon/feature-flags": "0.3.0",

So I also checked these versions and the error has been changed:

    "carbon-components": "10.32.1",
    "carbon-components-react": "7.32.1",
    "@carbon/feature-flags": "0.2.0",

New error is Invalid character and the problem is the usage of template literals at
https://github.com/carbon-design-system/carbon/blob/v10.32.1/packages/feature-flags/src/index.js#L23
(template literals are also unsupported on IE11).

So I still think that the feature-flags package is not properly compiled/polyfilled.

I'd also like to emphasize that the issue relates not just to the Storybook, but to the whole Carbon.

[emyarod]

#9204 resolves the issue in the feature-flags package but it looks like a storybook arrow function is causing a separate error (possibly as a result of upgrading storybook versions). not sure how we want to continue with resolving this given that IE11 support is being dropped cc @joshblack

[emyarod]

FWIW https://storybook.js.org/docs/react/workflows/faq#why-are-my-mdx-stories-not-working-in-ie11

related storybookjs/storybook#14578 storybookjs/storybook#12179

[joshblack]

+1 to the feature flags package stuff, that should have been transpiled and thankfully is fixed/merged into the codebase now 👍