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

1. npx create-react-app storybook-ie-issue
2. cd storybook-ie-issue
3. npx sb init
4. yarn build
5. yarn build-storybook
6. npx serve -s build -p 4443
7. 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
8. serve ./storybook-static -p 3322
9. Navigate to http://localhost:3322 on chrome: Fully functional
10. 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?

[homenkovit]

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.

[JoshButterworth]

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