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]

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!

[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: storybookjs/presets#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.

[stale]

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!

[tooppaaa]

@fgfmichael, https://www.npmjs.com/package/@storybook/preset-ie11 has been released a few days ago and should resolve the IE 11 compat of storybook + CRA.
Can you give it a try ?

[fgfmichael]

@tooppaaa I will need to make time to go back over my repo steps to test if it now works in a blank CRA app, however when I added the preset on my primary application I work on I am now getting the following build error during the WebPack phase (also note this is an ejected app)

ERROR in ./.storybook/storybook-init-framework-entry.js
Module build failed (from ./node_modules/@storybook/core/node_modules/babel-loader/lib/index.js):
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Duplicates detected are:
[
  {
    "alias": "C:\\Dev\\RepoNameHere\\node_modules\\@babel\\preset-env\\lib\\index.js",
    "options": {
      "shippedProposals": true,
      "useBuiltIns": "usage",
      "corejs": "3"
    },
    "dirname": "C:\\Dev\\RepoNameHere",
    "ownPass": false,
    "file": {
      "request": "C:\\Dev\\RepoNameHere\\node_modules\\@babel\\preset-env\\lib\\index.js",
      "resolved": "C:\\Dev\\RepoNameHere\\node_modules\\@babel\\preset-env\\lib\\index.js"
    }
  },
  {
    "alias": "C:\\Dev\\RepoNameHere\\node_modules\\@babel\\preset-env\\lib\\index.js",
    "options": {
      "targets": {
        "ie": "11"
      }
    },
    "dirname": "C:\\Dev\\RepoNameHere",
    "ownPass": false,
    "file": {
      "request": "@babel/preset-env",
      "resolved": "C:\\Dev\\RepoNameHere\\node_modules\\@babel\\preset-env\\lib\\index.js"
    }
  }
]

My guess would be that the detected webpack file is including babel presets and given I made this ticket about CRA maybe this wasn't considered?

Here are the start-storybook output for more info on how it bootstraps:

info @storybook/react v6.1.14
info
info => Loading presets
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 7 other files in "./.storybook"
info => Adding stories defined in ".storybook\main.js"
info => Using IE11 preset
info => Using default Webpack setup
info => Using cached manager

Cheers!

[Erazihel]

@tooppaaa Got the same error using the @storybook/preset-ie11 addon.

I've created an issue in the storybookjs/presets respository:
storybookjs/presets#190

[ijain3]

I am having exact same issue. I did try npmjs.com/package/@storybook/preset-ie11 and have the polyfill but still. Did anyone find the solution?

[MhMadHamster]

In the recently released versions 6.2.* storybook started to use color-convert (which is not in es5) so now you need to transpile it by yourself as well (in addition to acorn-jsx).

I tried @storybook/preset-ie11 and it didnt help.

[shilman]

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

[tooppaaa]

storybookjs/presets#197

Please note that you need to disable fastRefresh. A IE 11 fix will be released as part of version 0.5.0 I guess pmmmwh/react-refresh-webpack-plugin#298

[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

[ndelangen]

We're no longer supporting IE11 in storybook 7.0 beta