storybook: Not working in IE11 for new create-react-app project

Describe the bug Cannot run StoryBook for a create-react-app project in Storybook on IE11

To Reproduce

npx create-react-app storybook-ie-issue
cd storybook-ie-issue
npx sb init
yarn build
yarn build-storybook
npx serve -s build -p 4443
Navigate to http://localhost:4443 on IE11, functional web app (no errors in console) logo doesnt spin but still it has mounted which indicates successful transpilation
serve ./storybook-static -p 3322
Navigate to http://localhost:3322 on chrome: Fully functional
Navigate to http://localhost:3322 on IE11: error in console log

http://localhost:3322/vendors~main.81b7bcd9b5e616814051.bundle.js has an error because it contains un-transpiled ES6 code (class)

http://localhost:3322/main.81b7bcd9b5e616814051.bundle.js has an error because it contaqins un-transpiled ES6 code (spread)

Expected behavior I expect that a CRA based project should just work on IE11. I have ran the build instead of the HMR based dev version of storybook as I understand that allot of dev tools just dont work nice on IE11, the build option SHOULD however work.

I’ve ran --debug-webpack on this build step and looked over the webpack config file, it appears that it IS running in production mode and not development (which it runs on when we are using the dev storybook)

Screenshots

Code snippets If applicable, add code samples to help explain your problem.

System:

Environment Info:

  System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 12.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 84.0.4147.135
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    @storybook/addon-actions: ^6.0.16 => 6.0.16
    @storybook/addon-essentials: ^6.0.16 => 6.0.16
    @storybook/addon-links: ^6.0.16 => 6.0.16
    @storybook/node-logger: ^6.0.16 => 6.0.16
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4
    @storybook/react: ^6.0.16 => 6.0.16

Additional context Ran into the issue originally on a closed source project I am working on, I’ve spent a fair amount of time attempting to get babelrc setup to transpile and I’ve been unable to convince it, however that is where I believe the issue will be, perhaps the babelrc config file isn’t getting the news that we are doing a prod build and to support IE11?

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 7
Comments: 32 (13 by maintainers)

Most upvoted comments

Hi all! Have same issue with CRA project on differents PC with Windows 10 system. For test - if remove “@storybook/preset-create-react-app” from storybook’s main.js and add “ie 11” for browserslist in package.json IE work. But its not a good decision for CRA without own webpack config.

homenkovit on Aug 22, 2020

This seems to have popped up again.

As with the original issue, if you create a CRA Storybook with the official guide https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/

And install @storybook/addon-ie11 and @storybook/preset-ie11

In IE11 I see a white screen with an error in the console:

Error comes back to this reactrouter method:

Specifically this line:

let { basename, children, initialEntries, initialIndex } = _ref;

I see the same error regardless of whether or not I use the IE11 addon and preset

JoshButterworth on Apr 8, 2022

@tooppaaa Can you add this to the list? Maybe the new color controls did it

shilman on Apr 6, 2021