Storybook interface not loading on IE11

[bpeab]

Describe the bug
The interface/stories are not loading on Internet Explorer 11.

To Reproduce
Steps to reproduce the behavior:

1. start-storybook -p 3000 with storybook-html
2. Open Internet Explorer 11
3. See that Storybook is stuck in the loading state.

Expected behavior
Storybook should be working correctly on Internet Explorer 11.

System:
System:
OS: macOS Mojave 10.14.5
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Node: 13.1.0 - /usr/local/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.12.1 - /usr/local/bin/npm
Browsers:
Chrome: 78.0.3904.97
Firefox: 70.0.1
Safari: 12.1.1
npmPackages:
@storybook/addon-a11y: ^v5.3.0-beta.2 => 5.3.0-beta.2
@storybook/addon-actions: ^v5.3.0-beta.2 => 5.3.0-beta.2
@storybook/addon-docs: ^v5.3.0-beta.2 => 5.3.0-beta.2
@storybook/addon-knobs: ^v5.3.0-beta.2 => 5.3.0-beta.2
@storybook/html: ^v5.3.0-beta.2 => 5.3.0-beta.2

Additional context
The console of Internet Explorer outputs Syntax Error on vendors~main.js which redirect to the following code:

return class extends Parser {
  static get acornJsx() {
    return acornJsx;
  }
  // ...
}

[afebbraro]

I also get this issue in storybook html, react and angular.

node: v10.16.3
npm: 6.13.0
my html package.json
"@storybook/addon-a11y": "^5.3.0-beta.1",
"@storybook/addon-docs": "^5.3.0-beta.1",
"@storybook/addons": "^5.3.0-beta.1",
"@storybook/html": "^5.3.0-beta.1",
"@storybook/preset-scss": "^1.0.2",
"@storybook/theming": "^5.3.0-beta.1",

my react package.json
"@storybook/addon-a11y": "^5.3.0-beta.1",
"@storybook/addon-docs": "^5.3.0-beta.1",
"@storybook/addon-jest": "^5.3.0-beta.1",
"@storybook/addons": "^5.3.0-beta.1",
"@storybook/react": "^5.3.0-beta.1",
"@storybook/theming": "^5.3.0-beta.1",

my angular package.json
"@storybook/addon-a11y": "^5.3.0-beta.0",
"@storybook/addon-docs": "^5.3.0-beta.0",
"@storybook/addons": "^5.3.0-beta.0",
"@storybook/angular": "^5.3.0-beta.0",
"@storybook/preset-scss": "^1.0.2",
"@storybook/theming": "^5.3.0-beta.0",

[shilman]

@bpeab @afebbraro Would one of you mind bisecting to see which release introduced the bug? @afebbraro I see in your PR that you're upgrading from alpha.39, so it must have been a recent change.

@ndelangen @tmeasday can we set up a single IE story in chromatic to prevent this from continually happening without breaking the bank?

[afebbraro]

@shilman , That was a great idea! It actually wasn't introduced in beta.0 as I checked and saw it happening in every version from beta.0 back to alpha.45. Looks like the bug was introduced in https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.45. The last working version is alpha.44 for me.

This is the last combination that works in IE11:

  "@storybook/addon-a11y": "5.3.0-alpha.44",
    "@storybook/addon-docs": "5.3.0-alpha.44",
    "@storybook/addon-jest": "5.3.0-alpha.44",
    "@storybook/addons": "5.3.0-alpha.44",
    "@storybook/react": "5.3.0-alpha.44",
    "@storybook/theming": "5.3.0-alpha.44",

[tmeasday]

can we set up a single IE story in chromatic to prevent this from continually happening without breaking the bank?

We'd have to create a separate chromatic project and run builds against it. That'd work but we wouldn't get a PR badge for it.

Given it is a pass/fail type situation that's probably OK though. We do something similar in Chromatic proper to smoke test FF and IE.

[ndelangen]

I'd like to run a chromatic instance on every example TBH and get that feedback in a PR.

I might write my own custom github action for this.

[bpeab]

Any updates on this issue ? I see it has been assigned, does it mean I shouldn't try to solve the issue myself and open a PR ?

[ndelangen]

@bpeab please do, if you can find a solution and help fix this issue it would be immensely appreciated !

[tmeasday]

Yes, the assignment is more about trying to setup infrastructure to makes sure we don't keep regressing, we'd definitely like a fix to the actual problem!

[bpeab]

So, it certainly comes from addon-docs which uses acorn-jsx while not transpiling it, despite being written with ES6 classes. Not resolved the issue yet since I don't understand how babel-loader is involved in the whole project.

From what I understand, the preset.ts file is responsible extending the webpack configuration, am I wrong ?

Once I figured it out, I will open a pull request with the fix.

[shilman]

@patricklafrance I think you added the acorn dep. Do you think it would be easier to switch over to the babel parser/generator than to figure out this bug? As you noted in our chat, it certainly seems like a better long-term solution.

[patricklafrance]

Well it's not that hard but it would take time. The inspection logic and the code generation would have to be rewritten using babel instead.

Since I never use babel parser / generator I don't know if it support exactly the same feature set as acorn.

The docs code also used an acorn walker, I dont know if babel have one.

Maybe acorn-jsx could be transpiled? acornjs/acorn-jsx#98

[bpeab]

Well, that was the proposal in my last message. Transpiling it would fix the issue but I can't seem to find how Storybook handle transpilation yet. I tried to add the necessary property to the preset.ts rules involved in addon-docs but it doesn't seem to work. I perhaps don't understand where I should define it. Any hints ?

[patricklafrance]

@bpeab can't help with that but I agree that's the way to go. IMO we should be able to introduce code using ES6 features in SB.

@shilman I was in a hurry when I wrote my previous answer.

Here's a detailled answer on why we can't just swap acorn for babel without expecting to do a few changes:

1- acorn follow the estree specs and generate an AST accordingly. Babel claims to follow the estree specs but with a few deviations. Meaning it would requires to make sure the "few" deviations are handled by the inspection code. There is also the JSX code, I don't know if the generated AST for JSX follow any specs at all.

2- As for the code generation... I am not sure about the available formatting options with babel generator. Currently, the code that is generated for the "summary" is handled by a "compact" options available with escodegen. I dont know if babel generator offer a similar option. Even if it's available, there is a good chance the formatted output would have a few difference for either the "summary" or the "detail" and would requires the tests to be updated.

3- I guess babel traverse could replace acorn walk but I don't know if they offer a similar features set. For example, the depth of a property value is currently calculated using the "ancestor" feature of acorn walk, I don't know if babel traverse offer a similar feature.

[shilman]

@patricklafrance Fair enough

@Hypnosphi do you know how to fix the transpilation issue described here?

[Hypnosphi]

@bpeab Can you please show the code that you tried to add to preset.ts? Or maybe even open a PR?

[bpeab]

So far, I only identified the origin of the issue but haven't found any way to resolve it.

I'll try once I have some more time but from my understanding, we should make use of babel-loader and its preset-env to transpile acorn-jsx. I imagine it would take place inside the preset.ts file where the webpack configuration is extended. Something like exclude: /node_module/\(?!acorn)/...

[Hypnosphi]

It probably should be a separate babel-loader rule with modules: 'commonjs' and include: /node_modules\/acorn-jsx\// because https://github.com/acornjs/acorn-jsx/blob/master/index.js uses commonjs

[bpeab]

@Hypnosphi Also @babel/plugin-transform-modules-commonjs as plugin. It works for me on one of my Storybook projects (via .storybook/webpack.config.js. I'll try to make the change on the Storybook repository and submit a PR if successful.

Thanks all for your help.

[shilman]

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-beta.14 containing PR #9021 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

[tmeasday]

In order to avoid this happening again, let's run an example app in IE on Chromatic: #9039

[ndelangen]

@caspardue Would you be able to put that in a PR?

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.18 containing PR #9790 that references this issue. Upgrade today to try it out!

[edmulraney]

@shilman i'm still getting the same issue as above on 5.3.18:

[shilman]

Hmm this was def merged. @lmaze any idea what's going on in 5.3.18?

[timohermans]

Updating to @next replaces the error with the following error:

SCRIPT1002: Syntax error

which points to:

const ANY = Symbol('SemVer ANY')
// hoisted class for cyclic dependency
class Comparator {
  static get ANY () {
    return ANY
  }

Edit: Not sure if it matters, but I'm running the storybook on a Mac and then going to the page on a Windows VM.

[daneah]

@timohermans I'm seeing the same on 6.0.0-beta.1 using the same approach you mention.

[shilman]

@daneah @timohermans what do you see what you navigate to:

https://next--storybookjs.netlify.app/official-storybook/?path=/story/addons-a11y-basebutton--default

It's running beta.1 (next branch to be specific) and showing up fine in browserstack IE11.

I think the major problems are fixed in Storybook now thanks to heroic work by @tooppaaa @ndelangen. Let's get to the bottom of what's going wrong for you.

[tooppaaa]

@timohermans This is definitely an issue that was fixed recently. Above links is working for me in IE 11. Is the manager showing up for you ?

[daneah]

@shilman @tooppaaa those both seem to work—I see the problem specifically when using the web components flavor.

[tooppaaa]

Relates to #10486

[daneah]

Apologies, I missed that issue quite entirely. Will have a look!

[timohermans]

@shilman I can confirm the link you sent is working on my IE11. I will try to update storybook to the same version as yours and see what happens

[tooppaaa]

@timohermans Please hold for the next beta. We found an issue in the way the dll that ensure IE 11 compatibility was generated.
#10644 should resolve it (see the resolution comment as well)

[timohermans]

Thanks guys for all your hard work.

Is there a migration guide from 5.3 to 6.0? I can't seem to find it. Or maybe a quick rundown?

[tooppaaa]

You can follow this guide

[shilman]

@timohermans MIGRATION.md is the raw version, and I usually write a more conversational version as part of the release, like this one for 5.0: https://medium.com/storybookjs/storybook-5-migration-guide-d804b38c739d

[justinbayctxs]

I ran into this and agree this is not completely fixed on the v5 release. Looking at #9790, I tried tweaking that file in node_modules locally and could not get changes to take effect. I worked around this by force-compiling acorn-jsx in our 'main' storybook config since we're in full-control mode for TypeScript support (and other tweaks). Maybe full-control mode is a factor?

Edit: it was. We were actually overriding all webpack module rules via full control mode, so we couldn't pick up the fix in #9790. Resolving that fixed it.

[beaolivei]

I updated my storybook to v.6.0.19. It works well in Chrome but it is never finishing loading when I open it in ie11 (I am using Browserstack for it). The console throws no errors, I am struggling to understand why this is happening. Is anyone else still having problems with storybook v.6 in IE11?

[tooppaaa]

Isn't it just slow ? It's IE 11 ;)

[beaolivei]

No ;)

[lacolaco]

I'm in the same situation with 6.0.21 and 6.0.26. Because the build outputs contains ES class syntax IE 11 throws an error.

[activenode]

Same on my side

[tooppaaa]

Working on a fix #12811

[annewanghy]

after I follow the doc in https://storybook.js.org/docs/react/configure/babel and https://storybook.js.org/docs/react/essentials/introduction#disabling-addons,
ie error cames from this package

const wrapAnsi16 = (fn, offset) => function () {
	const code = fn.apply(colorConvert, arguments);
	return `\u001B[${code + offset}m`;
};