search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.67k stars 9.32k forks source link

Storybook not loading Browserstack for ie11 #14578

Closed Greenie10 closed 1 year ago

Greenie10 commented 3 years ago

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

Screenshot 2021-04-13 at 12 02 03

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 commented 3 years ago

Is there an error in the browser console?

Greenie10 commented 3 years ago
Screenshot 2021-04-13 at 16 15 26
Greenie10 commented 3 years ago

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

mt9eet commented 3 years ago

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 https://github.com/storybookjs/storybook/issues/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 commented 3 years ago

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 commented 3 years ago

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.

Screenshot from 2021-08-06 15-40-43

Screenshot from 2021-08-06 15-39-45

shilman commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

ndelangen commented 1 year ago

Storybook 7.0 beta no longer supports IE11.