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

[fgfmichael]

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?

[shilman]

serve mangles URLs and doesn't work well with storybook. have you tried npx http-server?

[fgfmichael]

Hi @shilman I had a go at that package, wasn't able to get it to work. That being said, the issue is to to with transplantation which I wouldnt imagine would be effected by the http server.

Could you follow my steps above and try your server OR see if it works on your system? Potentially this could be an environment issue caused by macos vs windows

[tooppaaa]

A class is causing issues

return class extends Parser{static get acornJsx()

It's working on https://next--storybookjs.netlify.app/official-storybook/

[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.

[norzserge]

I'm too confirm the presence of a bug. CRA project with default settings and Storybook 6 doesn't work in IE11 ((

[fgfmichael]

I've just tested CRA with @homenkovit workaround and I can confirm it worked. Unfortunately the closed source project I am working on which was a while ago based on CRA (then was ejected) is still having issues.

What was the mentality behind your changes @homenkovit ? perhapse I can re-work those thoughts into my fix?

Also the issue I am getting is still transpilation, arrow function in this case

[homenkovit]

@fgfmichael Just tested different project configurations... Don't know the reason why preset-create-react-app crushed IE unfortunately.
For me now working case - remove preset and write own webpack config for storybook (with svg as component, sass and others).

[tooppaaa]

cc @mrmckeb. I'll investigate a bit

[fgfmichael]

Given our application isnt doing anything all that complicated I might see if I can get a drop in replacement for latest webpack up and running, would be good to remove complexity from our project + might fix this

[linusklingzell]

It's not working for me either. Seems to me that there something wrong with the babel configuration, due to errors in both IE11 and in edge (version 42).

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[TerrySlack]

Hi, I'm currently using Storybook 6.0.18. I have the same issue. SB does not work in IE 11, crashing on return class extends Parser

[shilman]

@TerrySlack What happens if you upgrade to 6.1?

npx sb upgrade --prerelease

[TerrySlack]

@shilman Actually, I managed to track down the issue earlier today. The acorn-jsx module used by one of the storybook addons is not transpiled to ES5. Specifically acorn-jsx. I found this in one of the people who responded in another thread. Adding it to the custom config we have for storybook solved the problem.

{
          include: mPath => {
            // Some npm modules no longer transpiled to ES5, which
            // causes errors such as "const must be initialized" IE 11 and crash
            // the build.  So we need to transpile just those modules here.

           const inclusionReg = /node_modules\/(.*(acorn-globals))|(.*(acorn-jsx))|(.*(acorn-walk))/;
            // On Windows, mPath use backslashes for folder separators.  We need
            // to convert these to forward slashes because our
            // test regex, inclusionReg, contains one.
            const modulePath = mPath.replace(/\\/g, "/");

            if (inclusionReg.test(modulePath)) {

              // Don't need to see entire path in console             
              const pathArray = modulePath.split();
              console.log("TCL: transpiling module: ", pathArray[1] || modulePath);
              return true;
            }
            return false;
          },
         test: /\.(.mjs|js|jsx|tsx|ts)$/,
          use: [
            {
              loader: "babel-loader",
              options: {
                  presets: ["@babel/preset-env"]
                }
            },
          ],
        },

[tooppaaa]

Here's a proposal: https://github.com/storybookjs/presets/pull/176

The original issue is due to preset-create-react-app that removes defaults es6 transpilers to transpile again such dependencies.

@shilman @mrmckeb WDYT of this analysis and proposal ?

[tooppaaa]

@TerrySlack Are you using custom webpack / babel ?
I tested with a almost out of the box storybook default instance and it's working (as best as it can) on IE 11.

The point of this preset is to enable that kind of feature for users that completely opt out webpack / babel defaults but want to keep IE 11 working

[mrmckeb]

The issue - as I understand it - is that Storybook doesn't work in IE11 with the CRA preset, and this would allow users to force that to work.

I think extracting the IE11 support out of Storybook's core makes sense - and gives us a way to soft-deprecate IE11. As we move into 2021, supporting IE11 seems like something we shouldn't be investing time into.

Microsoft will stop supporting IE11 for Teams this month, and many other enterprise products dropped support some time ago. I understand this will impact people that use Storybook for testing, which is why we can't drop it completely today.

[TerrySlack]

@tooppaaa yes, we are using custom webpack/babel. Out of the box, Storybook did not work in IE 11. With the rule in my comment above, it now works.

[tooppaaa]

It make sense then because with the default webpack config from storybook, we transpile these dependencies again. The preset should solve such use case

[TerrySlack]

@tooppaaa For sure, for cra applications. But why not just bake it into storybook, something like your preset or the one I use above? Wouldn't that solve the issue with using either custom webpack/babel build or an app created with the cra cli?

[tooppaaa]

We already have such mechanisms in storybook.
Going "out of the road" there is no way - that I am aware of - to allow users to use their custom babel / webpack config AND force them to use part of ours. You can't have all.

The preset objectives are very well described by @mrmckeb, it's not only to fix this issue but also to prepare storybook to drop IE 11.

[TerrySlack]

Interesting. I thought the custom webpack config was merged with Storybooks wepback. I say this in seeing all of the IE 11 stuff added when doing a build. Before I put in the tweak mentioned above.