storybook: Storybook interface not loading on IE11

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

To Reproduce Steps to reproduce the behavior:

start-storybook -p 3000 with storybook-html
Open Internet Explorer 11
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® Core™ 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;
  }
  // ...
}

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 8
Comments: 71 (53 by maintainers)

Commits related to this issue

Merge pull request #9790 from lmaze/8884-fix-addon-docs-ie11 Addon-docs: Restore IE11 compat on Windows by transpiling correctly acorn-jsx for this OS (#8884) — committed to storybookjs/storybook by ndelangen 4 years ago
Merge pull request #9790 from lmaze/8884-fix-addon-docs-ie11 Addon-docs: Restore IE11 compat on Windows by transpiling correctly acorn-jsx for this OS (#8884) — committed to storybookjs/storybook by ndelangen 4 years ago

Most upvoted comments

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

+12

edmulraney on Apr 3, 2020

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?

+10

beaolivei on Aug 27, 2020

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.

timohermans on Apr 23, 2020

Oh, OK read the above and I saw this PR:#9021, which explains the transpiling of acorn-jsx (duh). There is a bug in here:

https://github.com/storybookjs/storybook/blob/b28056354caf3fa347a728bb28a587a9733e0b8c/addons/docs/src/frameworks/common/preset.ts#L49

We need to use path.join(), \/ won’t work on windows…

tmeasday on Jan 29, 2020

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`;
};

annewanghy on Dec 29, 2020

Working on a fix https://github.com/storybookjs/storybook/pull/12811

tooppaaa on Oct 24, 2020

Neither build or dev-mode were giving me problems on IE11 (tested with BrowserStack) and I tried multiple times with differents OS. Everything was running smoothly, at least, with the repro. Also changed the node versions to see if It had any impact but, there again, no problem.

Perhaps if @lmaze and @RCopeland could share their systems configs, I’d be able to investigate further.

bpeab on Jan 28, 2020

@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",

afebbraro on Nov 19, 2019

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.

lacolaco on Oct 13, 2020

@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)

tooppaaa on May 6, 2020

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.

bpeab on Nov 29, 2019

@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?

shilman on Nov 19, 2019