storybook not working (IE11 & chromium)

[helabenkhalfallah]

Describe the bug
Runing storybook on chrome works perfectly.
Howerver not on IE 11 and chromium.

IE 11 :

Chromium:

To Reproduce
Launch storybook on IE11 or chromium.

Expected behavior
Storybook should works on IE11 and chromium.

Code snippets
storybook webpack config :

// Export a function. Accept the base config as the only param.
module.exports = async ({ config }) => {
  config.module.rules.push({
    test: /\.scss$/,
    use: [
      // Creates `style` nodes from JS strings
      'style-loader',
      // Translates CSS into CommonJS
      'css-loader',
      // Compiles Sass to CSS
      'sass-loader',
    ],
  });
  config.module.rules.push({
    test: /\.(js|jsx)$/,
    exclude: /node_modules\/(?!(my-core-lib)\/).*/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          '@babel/preset-react',
          [
            '@babel/preset-env'
          ],
        ],
        plugins: [
          "@babel/plugin-transform-arrow-functions",
          "@babel/plugin-proposal-object-rest-spread",
          "@babel/plugin-proposal-optional-chaining",
          "@babel/plugin-syntax-dynamic-import",
          "@babel/plugin-proposal-class-properties",
          "@babel/plugin-transform-react-jsx"
        ]
      }
    },
  });
  config.resolve.extensions.push(".js", ".jsx");

  // Return the altered config
  return config;
};

addon.js :

import 'storybook-readme/register';
import '@storybook/addon-options/register';
import '@storybook/addon-actions/register';

storybook config :

import { addDecorator, configure } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { setConsoleOptions } from '@storybook/addon-console';

// setup storybook page css
import './index.css';

// set console options
setConsoleOptions({
  panelExclude: [],
});

// settings
addDecorator(
  withInfo({
    maxPropsIntoLine: 1,
    name: 'React Components',
    url: 'xxx',
    goFullScreen: false,
    showStoriesPanel: true,
    showAddonPanel: true,
    showSearchBox: false,
    addonPanelInRight: true,
    sortStoriesByKind: true,
    inline: true,
    header: false,
    source: true,
    styles: (stylesheet) => {
      const style = {
        ...stylesheet,
        infoBody: {
          padding: '10px',
        },
      };
      return style;
    },
  }),
);

const req = require.context('..', true, /\.jsx$/);
function loadStories(){
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

I tried to use babel config like useBuiltIns & coreJS & module. but the same issue.
I also tried suggested solution on others thread.

System:

Environment Info:
  System:
    OS: Windows 10 10.0.17134
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 10.13.0 
    npm: 6.4.1 
  Browsers:
    Edge: 42.17134.1098.0

Storybook version :

    "@storybook/addon-actions": "=5.2.6",
    "@storybook/addon-console": "=1.2.1",
    "@storybook/addon-info": "=5.2.6",
    "@storybook/addon-knobs": "=5.2.6",
    "@storybook/addon-links": "=5.2.6",
    "@storybook/addon-options": "=5.2.6",
    "@storybook/addons": "=5.2.6",
    "@storybook/react": "=5.2.6",

Thanks.

[shilman]

@ndelangen Another IE issue 🤦‍♂

[pocka]

Probably https://github.com/zloirock/core-js/issues/736 ?
The issue was fixed in [email protected], so please try upgrading. ~(And this might fix our CI status)~

[helabenkhalfallah]

OK I try. Thanks :)

[helabenkhalfallah]

Hello @pocka ,
I updated to storybook 5.2.8 and I have :

"core-js": {
            "version": "3.6.1",
            "resolved": "http://spice.socgen/nexus/content/groups/central-npm-all/core-js/-/core-js-3.6.1.tgz",
            "integrity": "sha512-186WjSik2iTGfDjfdCZAxv2ormxtKgemjC3SI6PL31qOA0j5LhTDVjHChccoc7brwLvpvLPiMyRlcO88C4l1QQ==",
            "dev": true
        },

but still the same issue :(

[helabenkhalfallah]

[helabenkhalfallah]

I tried also : delete package lock, delete node module, npm install again.

[pocka]

@helabenkhalfallah
Can't reproduce in a simple react app (non-CRA) even with [email protected]... could you provide a minimal repro repo?

[zloirock]

Most likely it's an error in the Babel config https://github.com/zloirock/core-js/issues/514

[helabenkhalfallah]

Hello, I removed all my stories and I started from scratch, but always the same issue.
Here is my webpack config :

module.exports = async ({ config }) => {
  config.module.rules.push({
    test: /\.scss$/,
    use: [
      // Creates `style` nodes from JS strings
      'style-loader',
      // Translates CSS into CommonJS
      'css-loader',
      // Compiles Sass to CSS
      'sass-loader',
    ],
  });
  config.module.rules.push({
    test: /\.(js|jsx)$/,
    exclude: /node_modules\/(?!(my-core-module)\/).*/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          '@babel/preset-react',
          [
            '@babel/preset-env',
            {
              modules: false,
              useBuiltIns: 'entry',
              corejs: 3,
              targets: {
                browsers: [
                  'chrome >= 41',
                  'ie >= 9',
                  'firefox >= 36',
                  'and_ff >= 36',
                  'android >= 4.4',
                  'iOS >= 8',
                  'last 1 samsung versions',
                ],
              },
            },
          ],
        ],
        babelrc: false,
        plugins: [
          "@babel/plugin-transform-arrow-functions",
          "@babel/plugin-proposal-object-rest-spread",
          "@babel/plugin-proposal-optional-chaining",
          "@babel/plugin-syntax-dynamic-import",
          "@babel/plugin-proposal-class-properties",
          "@babel/plugin-transform-react-jsx"
        ]
      }
    },
  });
  config.resolve.extensions.push(".js", ".jsx");

  // Return the altered config
  return config;
};

Addons.js :

import 'storybook-readme/register';
import '@storybook/addon-options/register';
import '@storybook/addon-actions/register';

config.js :

import { addDecorator, configure } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { setConsoleOptions } from '@storybook/addon-console';

// setup storybook page css
import './index.css';

// set console options
setConsoleOptions({
  panelExclude: [],
});

// settings
addDecorator(
  withInfo({
    maxPropsIntoLine: 1,
    name: 'React Components',
    url: 'url',
    goFullScreen: false,
    showStoriesPanel: true,
    showAddonPanel: true,
    showSearchBox: false,
    addonPanelInRight: true,
    sortStoriesByKind: true,
    inline: true,
    header: false,
    source: false,
    styles: (stylesheet) => {
      const style = {
        ...stylesheet,
        infoBody: {
          padding: '10px',
        },
      };
      return style;
    },
  }),
);

const req = require.context('..', true, /\.jsx$/);
function loadStories(){
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

I tried suggested solution in others thread for babel, but same issue.

SCRIPT5022: Exception levée mais non décelée
vendors~main.ca0fbf9b7d8efbd365f9.bundle.js (138086,55)

/***/ "../../node_modules/core-js/internals/internal-state.js":
/*!*************************************************************************************************************************!*\
  !*** XXX/node_modules/core-js/internals/internal-state.js ***!
  \*************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

var NATIVE_WEAK_MAP = __webpack_require__(/*! ../internals/native-weak-map */ "../../node_modules/core-js/internals/native-weak-map.js");

var global = __webpack_require__(/*! ../internals/global */ "../../node_modules/core-js/internals/global.js");

var isObject = __webpack_require__(/*! ../internals/is-object */ "../../node_modules/core-js/internals/is-object.js");

var createNonEnumerableProperty = __webpack_require__(/*! ../internals/create-non-enumerable-property */ "../../node_modules/core-js/internals/create-non-enumerable-property.js");

var objectHas = __webpack_require__(/*! ../internals/has */ "../../node_modules/core-js/internals/has.js");

var sharedKey = __webpack_require__(/*! ../internals/shared-key */ "../../node_modules/core-js/internals/shared-key.js");

var hiddenKeys = __webpack_require__(/*! ../internals/hidden-keys */ "../../node_modules/core-js/internals/hidden-keys.js");

var WeakMap = global.WeakMap;
var set, get, has;

var enforce = function enforce(it) {
  return has(it) ? get(it) : set(it, {});
};

var getterFor = function getterFor(TYPE) {
  return function (it) {
    var state;

    if (!isObject(it) || (state = get(it)).type !== TYPE) {
      throw TypeError('Incompatible receiver, ' + TYPE + ' required');
    }

    return state;
  };
};

If I use my components inside a separated project, everything works perfectly.

[zloirock]

One more time - please, check your Babel config - it should not transpile core-js - it's ~99% cases of errors in this line.

exclude: /node_modules/(?!(core-module)/).*/,

is incorrect regex for this case.

[helabenkhalfallah]

One more time - please, check your Babel config - it should not transpile core-js - it's ~99% cases of errors in this line.

exclude: /node_modules/(?!(core-module)/).*/,

is incorrect regex for this case.

core-module is my core module, I know that it should not transpile core-js.
It is our internal core.
I updated the code.

[helabenkhalfallah]

I check my babel again, thanks.

[afebbraro]

I noticed that https://monorepo.storybook.now.sh/ is not loading in IE11. My instance of SB isn't loading either in IE11 on windows 10.
"@storybook/addon-a11y": "^5.3.0-rc.7", "@storybook/addon-docs": "^5.3.0-rc.7", "@storybook/addons": "^5.3.0-rc.7", "@storybook/angular": "^5.3.0-rc.7", "@storybook/preset-scss": "^1.0.2", "@storybook/theming": "^5.3.0-rc.7",

[beth-panx]

I am having the same issue with IE11 on windows 10. Below is storybook versions.

    "@babel/core": "^7.7.5",
    "@storybook/addon-a11y": "^5.3.0-beta.31",
    "@storybook/addon-actions": "^5.3.0-beta.31",
    "@storybook/addon-docs": "^5.3.0-beta.31",
    "@storybook/addon-knobs": "^5.3.0-beta.31",
    "@storybook/addon-links": "^5.3.0-beta.31",
    "@storybook/addon-storysource": "^5.3.0-beta.31",
    "@storybook/storybook-deployer": "^2.8.1",
    "@storybook/web-components": "^5.3.0-beta.31",
    "@webcomponents/webcomponentsjs": "^2.4.0",
    "babel-loader": "^8.0.6",
    "babel-polyfill": "6.26.0"

However I was able to get storybook to work on Edge by adding the webcomponent polyfill (@webcomponents/webcomponentsjs/webcomponents-bundle.js') in preview.js

[afebbraro]

Hey all! Wondering if anyone found a workaround for this for the react/angular/html storybooks? Still experiencing the new 5.3.3 not working in Edge or IE.

[ndelangen]

Found some problem kinda caused by this:
https://github.com/emotion-js/emotion/pull/1731

[ndelangen]

I'm seeing 2 errors in the manager, 0 in the preview.

1 error is related to emotion. The emotion plugin seems to add a property to an object that already has that exact property. A duplicate property is a fatal error in IE11 😭

the second error seems to do with some code in node_modules not being IE11 friendly, graphiql has dependencies on some packages that have destructuring in them.

---

I have opened a PR with babel-emotion-plugin to address problem 1.

The other problem I am trying to find a proper solution for still

[ndelangen]

I'm able to get it to work right now by changing the webpack config:

// main.js
module.exports = {
  webpackFinal: async (config, { configType }) => ({
    ...config,
    module: {
      ...config.module,
      rules: [
        ...config.module.rules.slice(1),
        {
          test: /\.(mjs|jsx?|tsx?)$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: `.cache/storybook`,
                presets: [
                  [
                    '@babel/preset-env',
                    { shippedProposals: true, useBuiltIns: 'usage', corejs: 3 },
                  ],
                  '@babel/preset-typescript',
                  configType === 'PRODUCTION' && [
                    'babel-preset-minify',
                    { builtIns: false, mangle: false },
                  ],
                  '@babel/preset-react',
                  '@babel/preset-flow',
                ].filter(Boolean),
                plugins: [
                  '@babel/plugin-proposal-object-rest-spread',
                  '@babel/plugin-proposal-class-properties',
                  '@babel/plugin-syntax-dynamic-import',
                  // ['babel-plugin-emotion', { sourceMap: true, autoLabel: true }],
                  'babel-plugin-macros',
                  '@babel/plugin-transform-react-constant-elements',
                  'babel-plugin-add-react-displayname',
                  [
                    'babel-plugin-react-docgen',
                    { DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' },
                  ],
                ],
              },
            },
          ],
          exclude: [/node_modules/, /dist/],
        },
        {
          test: /\.js$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  [
                    '@babel/preset-env',
                    { shippedProposals: true, useBuiltIns: 'usage', corejs: 3 },
                  ],
                ],
              },
            },
          ],
          include: [/node_modules\/graphql-/],
        },
      ],
    },
  }),
}

[ndelangen]

related?:
https://github.com/storybookjs/storybook/issues/7540

[ndelangen]

related: https://github.com/storybookjs/storybook/issues/8884

[ndelangen]

Waiting for emotion-js/emotion#1731 to be released

[WirthAware]

We having similar issues running storybook/react in IE 11.
We tried newest v5.3.17 also new alpha version v6.0.0-alpha.29.
We also tried to run storybook from scratch w/o any addition just initialize storybook and tried out in IE 11.
But we was not able to run it in IE 11.

With storybook v5.x it breaks at this line

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args));
...

We also tried use babel, babel/preset-env options corejs ... but nothing seems to work.

System:

Environment Info:
  System:
    MacOS: 10.14.6
    CPU: 2,8 GHz Intel Core i7
  Binaries:
    Node: v13.12.0 
    npm: 6.14.4 
  Browsers:
    IE: 11 (Windows 10) -- Tested on Browserstack

[ndelangen]

@WirthAware that looks like there's come code in node_modules (perhaps semver?) that's ES6. If that's the case, what needs to happen for IE11 support is to pass the dependency thru babel-loader, (which will transform the ES6 to ES5)

[WirthAware]

@ndelangen but it also happen with a clean and fresh installation of storybook w/o any other dependency. Already tried some babel reconfiguration, also babel transformer but nothing seems to work

[ndelangen]

working on this..

[ndelangen]

got it working!

(dll must be enabled)

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.31 containing PR #10281 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.

[katywatkins]

@WirthAware Were you able to resolve that syntax error? I've been running into the exact same error in a fresh install and haven't been able to resolve it.

[helabenkhalfallah]

I tried this version but IE11 still not working :
"@storybook/react": "=6.0.0-beta.38",

Webpack config :

const webpack = require('webpack');

// Export a function. Accept the base config as the only param.
module.exports = async ({config}) => {
  const custom = {
    resolve: {
      extensions: [
        '*',
        '.js',
        '.jsx',
      ],
    },
    module: {
      rules: [
        {
          test: /\.(sa|sc|c)ss$/,
          use: [
           'style-loader',
            // Translates CSS into CommonJS
            'css-loader',
            // Compiles Sass to CSS
            'sass-loader',
          ],
        },
        {
          test: /\.less$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader', // translates CSS into CommonJS
            },
            {
              loader: 'less-loader', // compiles Less to CSS
              options: {
                javascriptEnabled: true,
              },
            },
          ],
        },
        {
          test: /\.(jpe?g|png|gif|svg)$/,
          loader: 'url-loader',
          options: {
            limit: 8192,
            name: 'assets/img/[name].[ext]',
          },
        },
        {
          test: /\.(ttf|eot|otf|woff2?)$/,
          loader: 'url-loader',
          options: {
            limit: 8192,
            name: 'assets/fonts/[name].[ext]',
          },
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules\/(?!yyy|xxx)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-react',
                [
                  '@babel/preset-env',
                  {
                    modules: false,
                    useBuiltIns: 'entry',
                    corejs: 3,
                    targets: {
                      browsers: [
                        'chrome >= 41',
                        'ie >= 9',
                        'firefox >= 36',
                        'and_ff >= 36',
                        'android >= 4.4',
                        'iOS >= 8',
                        'last 1 samsung versions',
                      ],
                    },
                  },
                ],
              ],
              babelrc: false,
              plugins: [
                "@babel/plugin-transform-arrow-functions",
                "@babel/plugin-proposal-object-rest-spread",
                "@babel/plugin-proposal-optional-chaining",
                "@babel/plugin-syntax-dynamic-import",
                "@babel/plugin-proposal-class-properties",
                "@babel/plugin-transform-react-jsx"
              ]
            }
          },
        },
        {
          test: /\.md$/,
          use: [
            {
              loader: "html-loader"
            },
            {
              loader: "markdown-loader"
            }
          ]
        },
      ]
    }
  };
  return ({
    ...config,
    node: {
      fs: 'empty'
    },
    module: {
      ...config.module,
      rules: custom.module.rules
    },
    resolve: {
      ...custom.resolve,
      ...config.resolve,
      modules: [
        ...config.resolve.modules,
      ]
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      ...config.plugins
    ]
  });
};

Versions :

    "@storybook/addon-a11y": "=5.3.19",
    "@storybook/addon-actions": "=5.3.19",
    "@storybook/addon-console": "=1.2.1",
    "@storybook/addon-info": "=5.3.19",
    "@storybook/addon-knobs": "=5.3.19",
    "@storybook/addon-links": "=5.3.19",
    "@storybook/addon-options": "=5.3.19",
    "@storybook/addon-viewport": "=5.3.19",
    "@storybook/addons": "=5.3.19",
    "@storybook/react": "=6.0.0-beta.38",

[helabenkhalfallah]

The same thing for :
"@storybook/react": "=6.0.0-alpha.31",

[shilman]

@ndelangen @tooppaaa any idea what's going on here?

[katywatkins]

@helabenkhalfallah have you tried updating all of the Storybook packages to 6.0.0-beta.38? I was struggling with the error you're seeing for a long time. beta.16+ resolved it for me, but I've been updating everything to beta versions, not just Storybook/react.

[helabenkhalfallah]

@katywatkins I tried now :

    "@storybook/addon-a11y": "^6.0.0-beta.38",
    "@storybook/addon-actions": "^6.0.0-beta.38",
    "@storybook/addon-console": "^1.2.1",
    "@storybook/addon-info": "^5.3.19",
    "@storybook/addon-knobs": "^6.0.0-beta.38",
    "@storybook/addon-links": "^6.0.0-beta.38",
    "@storybook/addon-options": "^5.3.19",
    "@storybook/addon-viewport": "^6.0.0-beta.38",
    "@storybook/addons": "^6.0.0-beta.38",
    "@storybook/react": "^6.0.0-beta.38",

I can't update @storybook/addon-info, @storybook/addon-console and @storybook/addon-options, npm fail.

I get the same error.

I tried also remove node module, package lock, dist and reinstall.

This is also my storybook config file :

import { addDecorator, configure } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { setConsoleOptions } from '@storybook/addon-console';
import { withA11y } from '@storybook/addon-a11y';

// setup storybook page css
import './index.css';

// set console options
setConsoleOptions({
  panelExclude: [],
});

// settings
addDecorator(
  withInfo({
    maxPropsIntoLine: 1,
    name: 'React Components',
    url: '',
    goFullScreen: false,
    showStoriesPanel: true,
    showAddonPanel: true,
    showSearchBox: false,
    addonPanelInRight: true,
    sortStoriesByKind: true,
    inline: true,
    header: false,
    source: false,
    styles: (stylesheet) => {
      const style = {
        ...stylesheet,
        infoBody: {
          padding: '10px',
        },
      };
      return style;
    },
  }),
);

addDecorator(withA11y);

const req = require.context('..', true, /\.jsx$/);
function loadStories(){
  req.keys().forEach(function (filename) {
      req(filename);
  });
}

configure(loadStories, module);

When deploying storybook (storybook build and deploy bundle) it works in IE but local dev not.

It's hard to deploy each time to test little thing :( :(

Thank you for your help.

[shilman]

Good catch @katywatkins. Please try removing @storybook/addon-info @helabenkhalfallah

[helabenkhalfallah]

Okay @shilman I try now this, thank you 👍

[helabenkhalfallah]

Unfortunately not :

I removed everything :

stories index :

import React from 'react';
import {
  storiesOf,
} from '@storybook/react';
import {
  withKnobs,
} from '@storybook/addon-knobs';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

// stories
const stories = storiesOf('Components UI Kit', module);

// prepare story board
stories
  .addParameters(
    {
      options: {
        theme: {},
      },
      viewport: {
        viewports: INITIAL_VIEWPORTS,
      },
    }
  )
  .addDecorator(withKnobs);

addonjs => empty

config.js :

import { addDecorator, configure } from '@storybook/react';
import { setConsoleOptions } from '@storybook/addon-console';
import { withA11y } from '@storybook/addon-a11y';

// setup storybook page css
import './index.css';

// set console options
setConsoleOptions({
  panelExclude: [],
});

addDecorator(withA11y);

const req = require.context('..', true, /\.jsx$/);
function loadStories(){
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

package.json, info removed :

    "@storybook/addon-a11y": "=6.0.0-beta.38",
    "@storybook/addon-actions": "=6.0.0-beta.38",
    "@storybook/addon-console": "=1.2.1",
    "@storybook/addon-knobs": "=6.0.0-beta.38",
    "@storybook/addon-links": "=6.0.0-beta.38",
    "@storybook/addon-options": "=5.3.19",
    "@storybook/addon-viewport": "=6.0.0-beta.38",
    "@storybook/addons": "=6.0.0-beta.38",
    "@storybook/react": "=6.0.0-beta.38",

remove all node modules and reinstall.

[tooppaaa]

@helabenkhalfallah What is the exact issue in the console ? I've seen above it was about semver but I don't recognize where getterFor

@storybook/addon-options is deprecated since 5.x, could you try to remove it and see how it goes ?

[helabenkhalfallah]

Yes @tooppaaa I will do it now ! thank you 👍

[helabenkhalfallah]

The same error :
I have deleted node modules, package lock and reinstall.

[helabenkhalfallah]

Chrome :

IE 11 :

[tooppaaa]

Thanks for this.
The manager is correctly displayed, meaning it's not a storybook issue.

I can try to look a bit more, do you have a public reproduction of this issue ?

[helabenkhalfallah]

@tooppaaa Unfortunately not, it is an internal project :( :(
I removed everything from the storybook.
I will try in a separated project from scratch.
I will let you in, thank you so much :) :)

[impulsivetomato]

I was able to fix the issue using the following

module.exports = {
  addons: ['@storybook/addon-docs', '@storybook/addon-knobs'],
  stories: ['../src/**/*.stories.@(js|mdx)', '../stories/*.js'],
  webpackFinal: async (config) => {

    config.module.rules = [
      ...config.module.rules,
      {
        test: /\.js$/,
        include: /node_modules\/@react-leaflet|react-leaflet/,
        loader: 'babel-loader',
        options: {
          babelrc: false, 
          presets: ['@babel/preset-env'],
        },
      },
    ];

    return config;
  },
};