Storybook: Storybook interface not loading on IE11

[bpeab]

[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? https://github.com/acornjs/acorn-jsx/issues/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: https://github.com/storybookjs/storybook/issues/9039

[lmaze]

I encounter this bug again. If I add @storybook/addon-docs, the Storybook no longer works on IE11. acorn-jsx is not transpiled and causes a syntax error (on the line return class extends Parser of the bundle). I use the latest version of Storybook and its addons (5.3.9).

[RCopeland]

@lmaze I saw the same thing, but only in the dev mode, once i deployed (npm run build-storybook) i didnt see it.

[tmeasday]

I saw the same thing, but only in the dev mode, once i deployed (npm run build-storybook) i didnt see it.

Could this be due to your browserslist in package.json? Vanilla CRA apps do not work in IE in dev mode, but do in prod for this reason.

[lmaze]

I checked everything several times and added targets for IE11 in my package.json and my Babel configuration to be sure that all the files are transpiled correctly (I already had a properly configured babel.config.js file at the root). I even added a babel-loader to my storybook webpack.config.js file to force the transpilation of the acorn-jsx and acorn libraries. Maybe I missed something but I still get the same error in dev mode or in build mode.

For me it looks like a bug, addon-docs should come with all the libraries transpiled. Otherwise it may be a configuration error on my part but my configuration is quite simple and without this addon all is working fine in IE11 :(

@shilman Is it possible to reopen this bug?

[RCopeland]

@tmeasday hey thanks, i tried it out with and without a browerslist entry, but got the same error. I also tried with a .browserslistrc file in the root.
Here's a repro repo: https://github.com/RCopeland/storybook-html-test
build-storybook then deploy works fine,
npm run storybook gives me the error in IE 11 (acorns-jsx has classes)

deploy link: https://sbh.robcopeland.me/

[lmaze]

@RCopeland I tried with your example repo. It is exactly the same problem I encounter. In dev mode, there is a syntax error on the line return class extends Parser:

When I test with IE11 your example built locally, I also have a syntax error problem (I open the index.html directly via the "Open in browser" menu of IntelliJ which launches a local server).

No problem on your deployed link however.

[bpeab]

I tried with your reproduction repository and don't have any warnings or errors on IE11.

[ndelangen]

Thanks for testing the repro @bpeab

You weren't able to find any IE11 problems on his repro? neither build or dev-mode?

---

I was able to find 2 issues before on our own official-example.

The webpack config patch I posted resolves them.

My PR to emotion should go through soon hopefully; addressing 1 issue.

The graphiql issue seems lower-priority to me (given the install-base of the addon-graphql and it's non-critical nature). I think the graphiql authors aren't sure what to support or not.

@RCopeland
I'll run your example on my machine as well, and see if I can reproduce the problem in IE11 on browserstack. Thank you for taking the time and effort to create this repro for us.

[bpeab]

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.

[lmaze]

@bpeab Thanks for the tests and for the help. Here is my system config:

• OS : Windows 10 Enterprise N x64 - Version 1903 (Build 18362.592).
• Node : Version 12.14.1 x64 (The last version of LTS)
• IE : Version 11.592.18362.0 (Update 11.0.170)
• Storybook : 5.3.9 (with @storybook/react)

Do not hesitate to tell me if I can give you more information or do more tests.

We also build our Storybook with a Docker image on Linux. I will also try with this configuration to see if there is a problem.

[RCopeland]

Hey @bpeab @ndelangen @lmaze thanks for digging in.

I'm running the repro on:

OS: windows 10 x64
Node: v12.14.1
IE 11 (11.582.18362.0)
This is on my iMac with windows installed via bootcamp

I'm seeing this error when npm run storybook is running.

[ndelangen]

These screenshots are taken of the repro repo?

[lmaze]

@ndelangen The 2 screenshots from https://github.com/storybookjs/storybook/issues/8884#issuecomment-578861017 have been taken with the repro repo. Screenshots of @RCopeland should be too as it is the same screenshot with the same error.

[ndelangen]

I'm going to look into this today / tomorrow

[ndelangen]

I'm looking at sbh.robcopeland.me in browserstac IE11:

0 console errors.

What am I doing wrong?

[ndelangen]

Then I run your repro locally, share it publicly using ngrok and test that in browserstack IE11:

Again, 0 console errors.

I'm unsure what to do.

[bpeab]

@Imaze, @RCopeland: Could you please run Webpack in verbose mode (npm run storybook -- --debug-webpack) and share the output with us ? This issue seems really weird to me and I can't really investigate further with the informations you've already shared...

[RCopeland]

[bpeab]

[tmeasday]

[lmaze]

[tmeasday]

[ndelangen]

[lmaze]

[stale[bot]]

[shilman]

[caspardue]

[ndelangen]

[shilman]

[edmulraney]

[shilman]

[timohermans]

[daneah]

[shilman]

[tooppaaa]

[daneah]

[tooppaaa]

[daneah]

[timohermans]

[tooppaaa]

[timohermans]

[tooppaaa]

[shilman]

[justinbayctxs]

[beaolivei]

[tooppaaa]

[beaolivei]

[lacolaco]

[activenode]

[tooppaaa]