Storybook not working in IE11

[pelotom]

Bug summary

It seems that something broke in v4.0.0-alpha.16 and has remained broken through v4.0.0-alpha.18. Using a fresh install of storybook into a brand new CRA, the storybook doesn't load.

Having done some cursory research, this issue looks potentially relevant and in particular this comment.

Steps to reproduce

yarn global add create-react-app @storybook/[email protected] @babel/core
create-react-app cra
cd cra
getstorybook
yarn storybook

Navigate to the storybook page in IE11. The page is blank, and the console has 2 instances of this error:

SCRIPT5022: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
File: manager.bundle.js, Line 30065, Column: 1

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/[email protected]+

Affected platforms

• IE11

[KADlancer]

I tested it with my pet project on browserstack and can confirm, but with a different error in IE11:

SCRIPT438: Object doesn't support property or method 'assign'
manager.bundle.js (43262,1)

which leads to this line of code:
Object.assign(glamorousComponentFactory, { withConfig: withConfig });

while the project runs in my other browsers.

[pelotom]

@KADlancer you will need to provide a polyfill for Object.assign and other things before it has a chance to work in IE11. I use core-js for this.

[KADlancer]

Thanks, I'm gonna try that tomorrow.

I made my build with the alpha to get support for webpack 4. So far it looks good but there are a few minor things with addons I need to figure out but that's something for another issue

[ndelangen]

Still an issue with the latest alpha?

[pelotom]

@ndelangen yes

[ndelangen]

Thank you for confirming, gonna try to look into this as soon as I can.

Do you happen to have a reproduction repo?

[pelotom]

Do you happen to have a reproduction repo?

The commands in the description create a repro project.

[ranzwertig]

I just added import '@babel/polyfill'; as first import in the addons.js which solved the problem.

[ndelangen]

Thanks for the info @ranzwertig !

[daKmoR]

I have the same IE11 "problem" although it's for @storybook/polymer.

If you open "https://storybooks-polymer.netlify.com/" in IE11 it will now show any stories. Although the UI is fine. As its a build version + IE11 it's really tough to debug there.

So if I run IE11 locally for my project I get this

SCRIPT1002: Syntax error
// in this file ./node_modules/lit-html/directives/classMap.js
const classMap = classInfo => Object(_lit_html_js__WEBPACK_IMPORTED_MODULE_0__["directive"])(part => {

so it seems lit-html does not gets correctly transpired... (e.g. IE11 can't handle arrow functions)

I tried to add it to the include path (see below) but that didn't change anything - is there another place where I need to define that? or maybe is it configured to not transpile arrow function?

I also tried adding import '@babel/polyfill'; but as expected it didn't help as it's a transpilation error.

So if aynone got any more ideas - I am willing to test them all out.

// .storybook/webpack.config.js
const path = require('path');

module.exports = (storybookBaseConfig, configType, defaultConfig) => {
  defaultConfig.resolve.modules.push('bower_components');

  defaultConfig.module.rules[0].include.push(path.resolve(__dirname, '../node_modules/lit-html'));
  return defaultConfig;
};

// .storybook/.babelrc
{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

Versions:

    "@babel/core": "7.1.2",
    "@babel/plugin-proposal-object-rest-spread": "7.0.0",
    "@babel/plugin-syntax-dynamic-import": "7.0.0",
    "@storybook/polymer": "4.0.0-alpha.24",
    "@webcomponents/webcomponentsjs": "2.1.3",
    "babel-loader": "8.0.4",
    "lit-html": "0.12.0",
    "moment": "2.22.2",
    "polymer-webpack-loader": "2.0.3"

[daKmoR]

found a solution

// .storybook/.babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

and we need to exclude it from the exclude 🎉 😁

// .storybook/webpack.config.js
const path = require('path');

module.exports = (storybookBaseConfig, configType, defaultConfig) => {
  defaultConfig.resolve.modules.push('bower_components');

  defaultConfig.module.rules[0].exclude = /regep\/path\/to\/node_modules(?!\/lit-html)/;

  return defaultConfig;
};

I will clean this exclude of exclude up later... so if anyone is interested just let me know...
have to run now

[ndelangen]

defaultConfig.module.rules[0]

Can I suggest a .find instead?

[daKmoR]

@ndelangen find?

how about something like this?
e.g. useful if multiple rules exclude node_modules

  // Searches through all exclude rules and replaces them if they exclude node_modules
  // Replacement will exclude node_modules with the exeption of listed below packages
  for (let i = 0; i < defaultConfig.module.rules.length; i += 1) {
    const rule = defaultConfig.module.rules[i];
    if (rule.exclude) {
      for (let j = 0; j < rule.exclude.length; j += 1) {
        if (rule.exclude[j] === path.resolve('node_modules')) {
          rule.exclude[j] = (modulePath) => {
            return /node_modules/.test(modulePath) &&
                !/node_modules\/lit-html/.test(modulePath);
          }
        }
      }
    }
  }

[stale]

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!

[shilman]

Storybook 4.0 has been working on IE11 for me out of the box. Was this fixed sometime before the 4.0 release? @daKmoR @pelotom mind giving it another try with @latest?

[pelotom]

Yes, it seems to be fixed now.

[pelotom]

This has regressed as of storybook 4.1 and is still occurring in the 4.2 alpha at the time of this writing.

[shilman]

@pelotom I just released https://github.com/storybooks/storybook/releases/tag/v4.2.0-alpha.9 containing PR #5081 that might fix this. Give it a try? Because it's a pre-release you can find it on the @next NPM tag.

[pelotom]

@shilman unfortunately it doesn't seem to have fixed it.

[shilman]

Just released https://github.com/storybooks/storybook/releases/tag/v4.1.9 that I'm pretty sure fixes it (just tested it with https://storybooks-official.netlify.com/). Closing this now, but ... famous last words. Please re-open if you still have problems. Fingers crossed!!!

[pelotom]

@shilman it's working for me again now, thanks!

[jlandrum]

I'm experiencing this problem on 4.1.11... Too early to say it needs to be re-opened - it could be my funky TypeScript / Babel / Vue setup, but the issue looks to be the exact same at face value.

Edit: Disregard - it was absolutely me - I had some TS that wasn't going through babel - works perfectly :)

[danbirle]

bug description fits exactly with what i get in version 5.2.1

[ndelangen]

@danbirle can you help us with a reproduction repo?

[danbirle]

yes, I'll write instructions later today / tomorrow latest; sorry for late reply

[danbirle]

sorry again. updated to 5.2.4 and it seems it works without a problem now. would you still like a reproduction repo?

[kwilsbach]

I've upgraded to 5.3.0-beta.22 and my storybook that was working in IE11 no longer works. Previous version was 5.2.8.

[shilman]

@ndelangen how's that IE build coming? 😄

[Eldorean]

Using version 5.3.13 => Also not loading in IE11. Tracked the error down to the following.

addParameters({
  options: {
    storySort: (a, b) =>
    a[1].
      a[1].kind === b[1].kind
        ? 0
        : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })
  }
});

After removing the option and reloading it worked again.

Update:
As I expected the error is in the arrow function. Replace the above with:

addParameters({
  options: {
    storySort: function storySort(a, b) {
      return a[1].a[1].kind === b[1].kind
        ? 0
        : a[1].id.localeCompare(b[1].id, undefined, {
            numeric: true
          });
    }
  }
});

All code needs to be in ES5.

[shilman]

cc @ndelangen

[ndelangen]

@Eldorean is this with config.js? or preview.js?

[Eldorean]

@ndelangen Its with the preview.js setup.

[stephanepericat]

also not working in IE 11 for 5.1.11