Errors in IE11 Storybook 6.4.9

[anton-prok]

After updating Storybook to the last version (6.4.9), I become get an error in IE11 (in other browsers it works fine):

If i open it, I can see, that issue comes from unabling to destructuring object with variable initialization (my guess):

But as I can see from these dependencies, Storybook already use appropriate plugin to support this feature (line 69):
https://github.com/storybookjs/storybook/blob/next/lib/core-common/src/utils/babel.ts

I also have disabled Docs from Essentials addon:

Here's my main.js:

const path = require('path');

module.exports = {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: [
        '@storybook/addon-links',
        {
            name: '@storybook/addon-essentials',
            options: {
                docs: false,
            },
        },
        '@storybook/addon-ie11',
    ],
    framework: '@storybook/react',
    webpackFinal: async (config, { configType }) => {
        config.module.rules.push({
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            include: path.resolve(__dirname, '../'),
        });

        config.resolve = Object.assign(config.resolve, {
            alias: {
                '~api': path.resolve(__dirname, '../src/api/'),
                '~components': path.resolve(__dirname, '../src/components/'),
                '~containers': path.resolve(__dirname, '../src/containers/'),
                '~img': path.resolve(__dirname, '../src/img/'),
                '~redux_related': path.resolve(__dirname, '../src/redux_related/'),
                '~routes': path.resolve(__dirname, '../src/routes/'),
                '~utils': path.resolve(__dirname, '../src/utils/'),
                '~styles': path.resolve(__dirname, '../src/styles/'),
                '~fonts': path.resolve(__dirname, '../src/fonts/'),
                '~ui': path.resolve(__dirname, '../src/ui/'),
            },
        });

        return config;
    },
};

Any advice?

[shilman]

As far as I know, Storybook 6.4 itself is compatible with IE11. We have a CI step that verifies that: https://www.chromatic.com/builds?appId=5def629a9aec2800201cd626

Are you using MemoryRouter in your project configuration, perhaps a decorator in .storybook/preview.js? It looks like that's not getting properly transpiled to IE11-compatible JS.

[inthegreenwild]

I have the same exact issue with 6.4.8 and 6.4.9
I am not using any decorators and the only addon I have is essentials with docs disabled.

[inthegreenwild]

@shilman shilman

The error is coming from react router which was introduced into the storybook router in 6.4. I think this is the culprit for breaking IE 11 support. I downgraded to 6.3.12 and storybook will start up again. However, the stories never finish loading due to a new error:

Unable to get property "call" of undefined or null reference
vendor-main.manager.bundle.js

For reference I'm using storybook/html

[shilman]

Thanks @inthegreenwild. I can confirm the problem. Storybook is built in two parts: the outer UI called the manager, and an inner iframe called the preview which is where your stories are rendered. Our CI tests that we didn't break the preview, but it does not test the manager. The react-router upgrade broke the manager UI, but we should be able to fix it.

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.10 containing PR #17141 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

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

[inthegreenwild]

Tested in IE 11 and it's working, thanks!