storybook: storybook not working (IE11 & chromium)

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.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 6
Comments: 45 (20 by maintainers)

Most upvoted comments

got it working!

(dll must be enabled)

ndelangen on Apr 2, 2020

@ndelangen Another IE issue 🤦‍♂

shilman on Dec 25, 2019

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.

shilman on Apr 7, 2020

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

WirthAware on Mar 30, 2020

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.

zloirock on Jan 2, 2020

ndelangen on Jan 28, 2020

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 on Jan 20, 2020