Storybook: Loading babel-polyfill for IE11

[mindjuice]

I have my first component working in Storybook, and everything is fine on Chrome and Firefox, but in IE11, I get the error Object doesn't support property or method 'find' when Storybook is trying to find a story in an array.

This seems to be because Array.find() needs to be polyfilled.

The solution should be to add import 'babel-polyfill; to the entrypoint, but I can't seem to find the right place to put this with Storybook (i.e., what constitutes the "entrypoint").

I've tried adding it to my component's index.js, as well as at the top of each of my story files, and also in .storybook/config.js, but I still get the same error in IE11. I also tried adding module.entry=['babel-polyfill'] in the webpack.config.js, with no difference.

Any other suggestions?

I'm using start-storybook -p 9001 -s ./stories rather than a custom server.js if that matters.

[mindjuice]

I downloaded the repo and used npm link to connect it to my project.

If I add import 'babel-polyfill'; as the first line of /src/client/manager/index.js, then everything loads properly in IE11.

It also works if I instead change the /src/client/manager/webpack.manager.conf.js to have the following entry points:

  entry: ['babel-polyfill', path.resolve(__dirname, '../src/client/manager/index.js')],

Can anyone else confirm if Storybook works for them in IE11 without one of these changes?

Also, for some reason, I needed to npm install babel-plugin-stage-0 --save-devand rerun npm run prepublish in @kadira/react-storybook in order for my own app build to succeed. Without it, I got this error in my own app's build:

... truncated earlier lines
  [469] ./~/webpack-hot-middleware/client-overlay.js 1.73 kB {0} [built]
  [470] ./~/webpack-hot-middleware/client.js 4.18 kB {0} [built]
  [471] ./~/webpack-hot-middleware/process-update.js 3.88 kB {0} [built]
chunk    {1} manager.bundle.js (manager) 325 kB [rendered]
    [0] multi manager 28 bytes {1} [built]
  [209] /Users/kenc/dev/react-storybook/dist/manager.js 325 kB {1} [built]

ERROR in /Users/kenc/dev/react-storybook/dist/server/error_enhancements.js
Module build failed: Error: Couldn't find preset "stage-0" relative to directory "/Users/kenc/dev/react-storybook/dist/server"
    at /Users/kenc/dev/web-components/tagged-token/node_modules/babel-core/lib/transformation/file/options/option-manager.js:372:17
    at Array.map (native)
    at OptionManager.resolvePresets (/Users/kenc/dev/web-components/tagged-token/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:20)
    at OptionManager.mergePresets (/Users/kenc/dev/web-components/tagged-token/node_modules/babel-core/lib/transformation/file/options/option-manager.js:348:10)
    at OptionManager.mergeOptions (/Users/kenc/dev/web-components/tagged-token/node_modules/babel-core/lib/transformation/file/options/option-manager.js:307:14)
    at OptionManager.init (/Users/kenc/dev/web-components/tagged-token/node_modules/babel-core/lib/transformation/file/options/option-manager.js:465:10)
    at File.initOptions (/Users/kenc/dev/web-components/tagged-token/node_modules/babel-core/lib/transformation/file/index.js:194:75)
    at new File (/Users/kenc/dev/web-components/tagged-token/node_modules/babel-core/lib/transformation/file/index.js:123:22)
    at Pipeline.transform (/Users/kenc/dev/web-components/tagged-token/node_modules/babel-core/lib/transformation/pipeline.js:45:16)
    at transpile (/Users/kenc/dev/web-components/tagged-token/node_modules/babel-loader/index.js:14:22)
 @ multi preview

Not sure if this is just because my project is using stage-0 or if perhaps it's related to using npm link instead of a proper release.

@arunoda Would you accept a PR for adding babel-polyfill? Also, are you able to test under IE11?

Thanks!

[arunoda]

Yes. PR on this would be great if it doesn't work on IE11.
But I assume we have added some polyfills as well

@mnmtanish could you help @mindjuice on this.
And check what's the size increase by this change.

[mindjuice]

Sorry, I'm not clear if you want me to submit a PR first, or if you are first going to try to verify that you have the same issue on IE11.

If you'd like a PR, I'll get that done ASAP, but I'm wondering if you have a preference over the two ideas I suggested above (adding an import line in /src/client/manager/index.js or changing the entry array in webpack.config.js).

Thanks.

[mnmtanish]

Pushed 2 PRs #237 and #238 one with babel-polyfill and one with es6-shim. But I guess #238 is better because es6-shim seems lighter compared to babel-polyfill. Both of them fix the IE11 issue.

no-polyfill/static:
total 1128
-rw-r--r--  1 thanish  staff   246K Jun  7 13:43 manager.bundle.js
-rw-r--r--  1 thanish  staff   216B Jun  7 13:43 manager.js.map
-rw-r--r--  1 thanish  staff   307K Jun  7 13:43 preview.bundle.js
-rw-r--r--  1 thanish  staff   231B Jun  7 13:43 preview.bundle.js.map

es6shim/static:
total 1232
-rw-r--r--  1 thanish  staff   297K Jun  7 14:08 manager.bundle.js
-rw-r--r--  1 thanish  staff   238B Jun  7 14:08 manager.js.map
-rw-r--r--  1 thanish  staff   307K Jun  7 14:08 preview.bundle.js
-rw-r--r--  1 thanish  staff   231B Jun  7 14:08 preview.bundle.js.map

babel-polyfill/static:
total 1440
-rw-r--r--  1 thanish  staff   317K Jun  7 13:42 manager.bundle.js
-rw-r--r--  1 thanish  staff   229B Jun  7 13:42 manager.js.map
-rw-r--r--  1 thanish  staff   390K Jun  7 13:42 preview.bundle.js
-rw-r--r--  1 thanish  staff   251B Jun  7 13:42 preview.bundle.js.map

[mnmtanish]

We can also conditionally enable the shim with a command line flag

start-storybook --enable-polyfill -p 9001
build-storybook --enable-polyfill -o book

[mindjuice]

Sweet! Thanks!

The es6-shim works too.

Out of curiosity, is the --enable-polyfill flag new? I didn't see it in PR #238.

(EDIT: Maybe I misread... I thought "We can..." meant "Now we can", but it seems more likely that it meant "If we implement it, we can")

[mnmtanish]

Just released v1.29.3 which will add the shim by default.
I think 50KB is quite reasonable for IE11 support.

[mindjuice]

Thanks @mnmtanish. It's basically working now, although I see the following warning in the console in IE11:

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

[mnmtanish]

I'll check it out. Thanks for reporting these errors :) everyone here use macs.

[mindjuice]

I'm a Mac guy too actually, but my coworker is on Windows.

The bad news is that it doesn't work under Microsoft Edge either, even with the polyfill. The story names list in the sidebar doesn't appear, and clicking on a button tied to a Storybook action like action('Clicked me!') doesn't show anything in the bottom panel.

I installed Edge in a Windows 10 VM in VMWare Fusion to try and help debug this, but Edge crashes whenever I click anything! It might require a native Windows machine to debug this.

[mnmtanish]

I'm using Microsoft's RemoteIE.
https://developer.microsoft.com/en-us/microsoft-edge/tools/remote/

[mindjuice]

Thanks, RemoteIE worked for me too. I used ngrok to temporarily expose my localhost service, which was cool.

Storybook is definitely not working under Edge for me either (matching my coworker's experience that I described two comments above).

I don't have time to debug right now, but will try to find some time soon.

[Nickman87]

IE11 does not like the latest version of storybook (2.5.1) either. Seems like some other polyfills are still missing.

You want me to try and find out more about this issue or is somebody already on it?

[Guria]

Latest works in IE11 for me.

[1999]

Still facing the same bug in IE11. airbnb-js-shims doesn't contain Symbol polyfill btw (checked this just now with browserify).

[kaiyoma]

I'm seeing this issue as well. I'm running Storybook 2.35.3 and everything works correctly in Chrome, Firefox, and Edge (on Windows 10), but actions do not work in IE11. (The components under test are being rendered correctly though.)

If I try to dispatch an action, I see this in the console:

SCRIPT5009: 'Symbol' is undefined
runtime.js (560,1)

[mindjuice]

@kaiyoma Are you including babel-polyfill?

import 'babel-polyfill';

It wraps the core-js polyfill which includes Symbol support.

EDIT: Forgot some of the details from before, but it's pretty clear there is some polyfill issue with IE11 and Symbols. Not sure what storybook is including at the moment (no time to look right now).

[kaiyoma]

My understanding from one of the above comments is that this should "just work" now:

Just released v1.29.3 which will add the shim by default.

So no, I'm not importing babel-polyfill. I just tried importing it in my index.js and it doesn't change the behavior. Is there another step to enabling the shim that's not written down anywhere? I was under the impression that simply upgrading storybook would fix the issue.

[sag1v]

i'm facing the same issu with 'symbol undefiend'

[codeAscetic]

I get "Invalid Character" when trying to use it with styled-components. It doesn't like the ` character i think.

[ndelangen]

A PR on this would be welcome!

Related IE11 things:

1352

757

[tuanh118]

The red error 'Symbol' is undefined is still happening for me with version 2.31.0. I tried following this guide https://babeljs.io/docs/usage/polyfill/, but couldn't figure out what the "entry point" is. Can someone help?

[Hypnosphi]

.storybook/config.js is what you're looking for I think

[ndelangen]

Yeah that'd be it, another option would be to add your entrypoint in a custom webpack config.

[Hypnosphi]

add your entrypoint in a custom webpack config

In fact, it can be be as simple as

{
  entry: 'babel-polyfill'
}

UPD: looks like we don't merge entry points so it can't =( So just import babel-polyfill from config.js.

[kaiyoma]

I just tried these suggestions and it's still not working for me. I installed babel-polyfill and then tried adding it as the only entry point to my config and also tried importing it in the main file; no change in behavior.

[Hypnosphi]

Ok, looks like it should affect storybooks UI, not the stories itself. So you should import 'babel-polyfill' in .storybook/addons.js.

[Hypnosphi]

A question to everybody getting the Symbol error. Which addons do you use? Looks like this error isn't present with default setup

[kaiyoma]

I'm not using any addons and I don't have addons.js in my project.

[ndelangen]

@kaiyoma just create a file called addons.js in your storybook config folder (usually called .storybook) and import babel-polyfill in there.

[kaiyoma]

If I do that, the action logger panel at the bottom of the screen disappears entirely.

[Hypnosphi]

yeah, you should manually include the default addons:

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

[Hypnosphi]

@kaiyoma which version of @storybook/react do you have?

[kaiyoma]

I realized I was actually still on the old @kadira/storybook (I inherited this project recently), so I upgraded to the "proper" Storybook 3.2.3 with React 15.5. I finally got it working, but I'm still having issues with actions in IE11. Now, when I click a UI element (to trigger an action), nothing happens. Nothing in the logger, nothing in the console.

Here's my addons.js:

import 'babel-polyfill';
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

Any ideas?

[ndelangen]

clean the entire node modules and all lock files, make sure everything storybook related is at the latest version and install anew.

make sure you're importing the right addons in your stories.

[kaiyoma]

Yup, that did it! Thanks for all your help guys! 😄

[ndelangen]

Happy to help @kaiyoma !

[alanhogan]

I was getting a Symbol error in MSIE11 and a message stating that an EventSource polyfill is required. Simply upgrading Storybook resolved the error.