Storybook not loading Browserstack for ie11

[Greenie10]

Describe the bug
Either locally, or on production, the components within our instance of Storybook (https://www.findmypast.com/canopy) do not load in Browserstack to check ie11. Other browsers in Browserstack work happily. It's only ie11 that will not load the components. The outer frame of Storybook shows, but the list of components - shown as skeletons - just throb, waiting to load.

To Reproduce

1. Either using the chrome extension for Browserstack, or going directly to their website
2. choose ie11 in Browserstack,
3. try to view our Storybook (https://www.findmypast.com/canopy).
4. Components never load.

Expected behavior
I expect to see all components load in Storybook.

Screenshots

System
System:
OS: macOS 10.15.7
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Binaries:
Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
Yarn: 1.22.10 - ~/GitHub/titan/node_modules/.bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
Browsers:
Chrome: 89.0.4389.114
Firefox: 87.0
Safari: 14.0.3
npmPackages:
@storybook/addon-a11y: 6.2.7 => 6.2.7
@storybook/addon-essentials: 6.2.7 => 6.2.7
@storybook/addons: 6.2.7 => 6.2.7
@storybook/react: 6.2.7 => 6.2.7

Additional context
Our last version of Storybook was 6.0.20 and it did render in Browserstack ie11. Just updated to 6.2.7 today.

[shilman]

Is there an error in the browser console?

[Greenie10]

[Greenie10]

A colleague tried to load our storybook in real ie11, and this is a screenshot:

[mt9eet]

Hey @Greenie10, if you click on the vendors-main..., what does the debugger show you?

I'm encountering this issue as well. Mine is something with acornJSX, which was reported in #8884, and the error points exactly to this

The cause is:

So, it certainly comes from addon-docs which uses acorn-jsx while not transpiling it, despite being written with ES6 classes

---

I will try to dig deeper a bit and will report back if I can find a fix.

[mt9eet]

I found that the issue also comes from react-refresh-webpack-plugin.

They have made a fix here, but it doesn't seem to be released yet.

[tsteuwer-accesso]

I'm having the same issue. It seems to be that the files are not being compiled into ES5. They're still using fatty arrow functions.

[shilman]

If you're using @storybook/addon-docs there is a known incompatibility with IE11 there. Otherwise, 6.3.x is compatible as far as I know.

[tsteuwer-accesso]

It wont load even just starting a brand new storybook repo using the web-components configuration. The issue is

1.) the webpack cache module is still in ES6 using fatty arrows (I'm guessing a lot more of webpack is also not transpiled down) since this is just the first thing it hits. This should be transpiled to ES5.
2.) @storybook/web-components is not in ES5.

[shilman]

perhaps web-components specifically is not compatible. react with webpack4 is and we have tests for it.

[ndelangen]

Storybook 7.0 beta no longer supports IE11.