Storybook: IE11: webpack-hot-middleware's client requires EventSource to work

[ZebraFlesh]

Describe the bug
IE11 doesn't hot reload as you make changes.

To Reproduce
Steps to reproduce the behavior:

1. Get setup:

git clone https://github.com/storybooks/storybook.git
cd storybook
yarn install
yarn bootstrap --core
cd examples/official-storybook
yarn build-now
yarn storybook

1. In Chrome and IE11, visit http://localhost:9011/?path=/story/addons-backgrounds--overriden
2. Edit stories/addon-backgrounds.stories.js and change the overridden story from

  .add('overriden', () => <BaseButton label="This one should have different backgrounds" />, {
    backgrounds: [
      { name: 'pink', value: 'hotpink' },
      { name: 'blue', value: 'deepskyblue', default: true },
    ],
  })

to

.add('overriden', () => <BaseButton label="This one should have different backgrounds" />, {
    backgrounds: [
      { name: 'pink', value: 'hotpink', default: true },
      { name: 'blue', value: 'deepskyblue' },
    ],
  })

1. In Chrome, the background changs from blue to pink. IE11 fails to update.

Expected behavior
IE11 should automatically update via HMR like Chrome does.

System:

• OS: Windows 10
• Device: Dell Precision laptop
• Browser: IE11
• Framework: react
• Version: 5.0.0

Additional context
IE11 developer tools shows the error:
webpack-hot-middleware's client requires EventSource to work. You should include a polyfill if you want to support this browser: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events#Tools

I've tried yarn add event-source-polyfill and then import 'event-source-polyfill'; in config, but the error persists.

[ZebraFlesh]

This isn't an issue with backgrounds addon -- it's just a handy minimal example. Any storybook will fail to update in IE11 due to the missing EventSource polyfill.

[ZebraFlesh]

This is still an issue as of 5.0.6

[shilman]

@ZebraFlesh can you try adding it to addons.js instead? config.js configures the area where the component is rendered. addons.js configure the entire UI. @ndelangen is working on a cleaner solution, but for now maybe it's a workaround for this issue, and gives us more information for the fix. Please lmk if that works!

[alex-page]

@shilman I tried it out in the addons.js file, this is not working. For example both of these fail:

Following event-source-polyfill documentation:

import {NativeEventSource, EventSourcePolyfill} from 'event-source-polyfill';
const EventSource = NativeEventSource || EventSourcePolyfill;

Following @ZebraFlesh's above example.

import 'event-source-polyfill';

[ndelangen]

Can you try adding that to config.js ?

[adamdoyle]

Adding this line to addons.js worked for me:

import 'eventsource/lib/eventsource-polyfill';

I don't know if it matters, but I used the polyfill package mentioned in the link from the webpack HMR error message, instead of the one that @ZebraFlesh used.

In other words: I used eventsource (from the mozilla link) instead of event-source-polyfill.

edit: actually the link mentions several polyfills, including the one @ZebraFlesh used.

[adamdoyle]

I spoke too soon. Now the error is in the console and in the "actions" panel (and HMR still not working), but it's not giving me the original popup error anymore. (maybe I suppressed it somehow)

[adamdoyle]

this seems to work :crossed_fingers:

in config.js:

import { NativeEventSource, EventSourcePolyfill } from 'event-source-polyfill';
global.EventSource = NativeEventSource || EventSourcePolyfill;

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[wKich]

Issue is still exists. I was checked on 5.2.3.