Loading babel-polyfill for IE11

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!

[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?