Storybook: IE Edge/11 not displaying anything

[PenAndPapers]

Describe the bug
We are using vue js in our app and our storybook seems to work fine in most modern browsers except for IE edge and 11.

Below are our configs
package.json

{
  "name": "vue-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "storybook:build": "vue-cli-service storybook:build -c config/storybook",
    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-meta": "^1.6.0",
    "vue-router": "^3.0.3"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "*",
    "@storybook/addon-actions": "^4.1.0 || ^5.0.0",
    "@storybook/addon-knobs": "^4.1.0 || ^5.0.0",
    "@storybook/addon-links": "^4.1.0 || ^5.0.0",
    "@storybook/addon-notes": "^4.1.0 || ^5.0.0",
    "@storybook/addon-viewport": "^5.0.11",
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-plugin-pwa": "^3.8.0",
    "@vue/cli-plugin-unit-jest": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "storybook-vue-router": "^1.0.3",
    "tailwindcss": "^1.0.3",
    "vue-cli-plugin-storybook": "^0.6.1",
    "vue-cli-plugin-tailwind-purge-css": "^0.1.4",
    "vue-template-compiler": "^2.5.21"
  }
}

/config/storybook/addons.js

import '@storybook/addon-actions/register'
import '@storybook/addon-knobs/register'
import '@storybook/addon-links/register'
import '@storybook/addon-notes/register'
import '@storybook/addon-viewport/register'

/config/storybook/config.js

import { configure } from '@storybook/vue'
import Vue from 'vue'

// The code below loads all elements in a global context
const requireComponent = require.context('@components.elements', true, /[A-Z]\w+\.(vue|js)$/)
requireComponent.keys().forEach(fileName => {
  // Get component config
  const componentConfig = requireComponent(fileName)
  // Get PascalCase name of component
  const componentName = fileName.split('/').pop().replace(/\.\w+$/, '')
  // Register component globally
  Vue.component(componentName, componentConfig.default || componentConfig)
})
const req = require.context('../../src/stories', true, /.stories.js$/)
function loadStories () {
  req.keys().forEach(filename => req(filename))
}
configure(loadStories, module)

/config/storybook/webpack.config.js

const path = require('path')

module.exports = {
  resolve: {
    alias: {
      '@mixins.common': path.resolve(__dirname, '../../src/components/mixins/common'),
      '@mixins.domain': path.resolve(__dirname, '../../src/components/mixins/domain'),
      '@mixins.elements': path.resolve(__dirname, '../../src/components/mixins/elements'),
      '@mixins.layout': path.resolve(__dirname, '../../src/components/mixins/layout'),
      '@components.common': path.resolve(__dirname, '../../src/components/common'),
      '@components.domain': path.resolve(__dirname, '../../src/components/domain'),
      '@components.elements': path.resolve(__dirname, '../../src/components/elements'),
      '@components.layout': path.resolve(__dirname, '../../src/components/layout'),
      '@components.ui': path.resolve(__dirname, '../../src/components/ui'),
      '@directives': path.resolve(__dirname, '../../src/directives'),
      '@mixins': path.resolve(__dirname, '../../src/mixins')
    }
  }
}

To Reproduce
Steps to reproduce the behavior:
Launch the app in IE edge or IE11

Expected behavior
It should display storybook page and vue components

Screenshots
IE console error

System:

• OS: Windows 10
• Browser: IE Edge/11
• Framework: Vue JS 2.6

[adamdoyle]

I've been having to patch-package my local @storybook/api for awhile now to support IE11.

For version 5.2.0-alpha.40 of @storybook/api:

diff --git a/node_modules/@storybook/api/dist/modules/versions.js b/node_modules/@storybook/api/dist/modules/versions.js
index fc46be0..50bcb7c 100644
--- a/node_modules/@storybook/api/dist/modules/versions.js
+++ b/node_modules/@storybook/api/dist/modules/versions.js
@@ -1,5 +1,7 @@
 "use strict";

+require("whatwg-fetch");
+
 require("core-js/modules/es.array.find");

 require("core-js/modules/es.date.now");

(and obviously making sure to install whatwg-fetch if it's not already there)

Basically I'm adding a polyfill for "fetch" prior to where it's used in versions.js.

It would be nice if there existed the ability to add a polyfills.js to the .storybook directory to register polyfills that need to load prior to both the manager and the preview. IIRC adding it to addons.js or config.js wasn't early enough.

[shilman]

@adamdoyle Mind opening a PR to add that polyfill to Storybook rather than just patching it locally? The Storybook UI ("manager") should support IE11, and whatever shows up in the iframe ("preview") the user already has control over AFAIK through config.js.

[adamdoyle]

@shilman done.

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

[ziel5122]

If I can help this move forward in any way, let me know. My team is waiting on this for our storybook to work in ie11.

[adamdoyle]

Yeah sorry about that. I can probably do it on Monday if things aren't too busy at work. @shilman asked me to throw together a PR and then they moved the goalposts on me a little bit. 😉

[shilman]

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.24 containing PR #7401 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.1.11 containing PR #7401 that references this issue. Upgrade today to try it out!