Docz: Generated docs and docz.site seems to be broken in IE11

[mzedeler]

Bug Report

If I navigate to http://docz.site/ using IE11, the screen is just blank. The same applies to any generated docs, whether in dev mode or on the built docs.

To Reproduce

1. Go to http://docz.site/ with IE11

Expected: the docz site
Actual: blank screen and an error in the console complaining about an unexpected closing body tag. A little later, a syntax error is encountered in a JavaScript file.

I have reproduced this error with the example provided in examples/basic.

[mzedeler]

@pedronauck: I can help fix this bug if you can point me in the direction of where it is probably introduced. This whole monorepo/typescript setup is somewhat confusing.

[mzedeler]

I did some digging and believe the bug is somewhere in the transpilation setup here: https://github.com/pedronauck/docz/blob/master/packages/docz-core/src/bundlers/webpack/loaders.ts

[imeldaloei]

any luck on this one? 😄we need our guide site to works in IE11 since a good number of our end users use that browser!

[UXnomaan]

We have the same issue. Would be more than happy to help if there are some pointers as @mzedeler mentioned.

[mpivaa]

Hi @mzedeler, can you close properly the "root" div in the file below, delete your .docz directory and try again?

https://github.com/pedronauck/docz/blob/master/packages/docz-core/templates/index.tpl.html

This will fix the first warning.

For the second error, I think it's related to the target of Typescript compiler, try setting to an older es spec in the file below:

https://github.com/pedronauck/docz/blob/7a84638aa140888b0102885372bcacb9c797c395/tsconfig.json#L4

There is an arrow function in the generated bundle, IE 11 doesn't have support.

[omniverse]

Yeah, it looks like IE is choking on something in: webpack-serve-overlay/errorOverlay.js
Maybe a back tick (`).

[omniverse]

Could you add @babel/plugin-transform-template-literals to the babel config? I see at least two webpack bundles that contain templates. I tried to build the project myself but ran into missing dependencies and one typescript error that I didn't understand.

[leandroferreira]

Created an issue on webpack-serve-overlay to make sure the vendor bundle is compatible with ES5: https://github.com/G-Rath/webpack-serve-overlay/issues/10

I don't think this project should be transpiling vendor dependencies, but please correct me if I'm wrong and I can start working on a fix for that instead.

[ncknuna]

Any updates on this? This would probably keep us from using docz as we need to do QA for IE and would like to do it via our component lib documentation

[leandroferreira]

After looking into this, I believe it would be better to move away from webpack-serve, since it's deprecated, and enable its built-in overlay instead of using webpack-serve-overlay.

[leandroferreira]

See https://github.com/pedronauck/docz/issues/456

[pcast01]

Is this still being looked into?

[smathson]

Using webpack-dev-server seems to have fixed one class of issues during dev, but there is likely a built-time issue as well since the production site also doesn't load in IE11. Unfortunately IE11 error reporting is pretty terrible so I'm unable to track down the underlying issue. It might be as simple as changing the tsconfig target to "es5" here https://github.com/pedronauck/docz/blob/master/tsconfig.json#L4 but I'm not sure what the implications of that are as I'm not very familiar with TypeScript.

[ebaer]

Looks like it has been a while since the last post on this.
Has anyone been successful in getting this to transpile to ES5, so it will work on IE11?
If so, could you please post some guidance on how you solved it here?
Thanks
ewb

[andrew-t-james]

Is this issue still being looked at? Any pointers on how to get this to run for IE11?

[davixyz]

Yeap, we are also facing this issue. Any pointers?

[pedronauck]

Sorry guys, but It's not our focus to support IE11. I don't have time for that and a lot of priorities ahead, so, I'm closing this issue now, if someone wants to help and get this work to do, can reopen the issue and send us some pull request!

[smathson]

@pedronauck Fair enough, thanks for the heads up. Would you accept a PR that adds a supported browsers section to the readme in that case? Which browsers are currently considered supported? Thanks!

[imeldaloei]

@smathson i think listing supported browsers is a great idea! we ended up using storybook because the components we built have to work in IE11 and documentation site is a cheap and easy way to test the components. otherwise we have to spin up a separate react site just for testing IE11

[pedronauck]

Yeah, will be awesome @smathson 🙏

[smathson]

@pedronauck Happy to put together a PR if you tell me which browsers you want to support for this project. Evergreen only (Firefox/Chrome/Edge)? What about mobile browsers?

[ncknuna]

@pedronauck While it's totally understandable to not officially support IE11, would you accept PRs that would make IE11 work with the understanding that it may break in any future releases, as long as those PRs don't degrade performance for supported browsers?

[davixyz]

Yes! unfortunately IE11 is still around 2.7% of worldwide traffic and a lot of big companies will still support this browser. It would be awesome if we could have Docz run in IE11 so we can test things on this browser as well.

Browser Stats
https://www.w3counter.com/globalstats.php

[rupification]

+1 to this. from IE11 console it seems like its an es5 transpiling issue. using const and arrows => functions

[leahjlou]

Has anyone found a workaround for this? I've tried adding a onCreateBabelConfig to gatsby-config.json; I've also tried gatsby-plugin-compile-es6-packages. I couldn't get either to work.

If there are no workarounds, I may look into trying to contribute a PR if the maintainers would be open to it.

[rakannimer]

Hey all,

A PR would be very welcome !

If you'd like to give it a shot and have questions or need help please feel free to join our slack channel 👍

[mzedeler]

As reporter, I'm just happy to see someone wanting to contribute 🙂

[leahjlou]

I figured out a workaround for this so my site runs in IE. It's not completely ideal, but good enough for my use case.

Step 1: I installed gatsby-plugin-compile-es6-packages and configured it with this gatsby-config.js at the root of my project:

// gatsby-config.js
module.exports = {
  plugins: [
    resolve: `gatsby-plugin-compile-es6-packages`,
    options: {
      modules: [
        `copy-text-to-clipboard`,
        `regexpu-core`,
        `unicode-match-property-ecmascript`,
        `unicode-match-property-value-ecmascript`,
        `ulid`
      ]
    }
  ]
}

You'll need to add any modules that are using unsupported syntax to the modules array (this may be dependent on your project). It took some whack-a-mole to figure out exactly which modules need transformed, and it'll take some maintenance if new deps are added.

Step 2: I added a polyfill for HTMLElement.scrollTo. I used Gatsby's browser API's onClientEntry for this. I added a gatsby-browser.js file to the root of my project with this contents:

// gatsby-browser.js
// Called when the Gatsby browser runtime first starts.
exports.onClientEntry = () => {
  if (!HTMLElement.prototype.scrollTo) {
    HTMLElement.prototype.scrollTo = function (left, top) {
      this.scrollTop = top
      this.scrollLeft = left
    }
  }
}

I was trying to cover all my bases with just the gatsby-config.js, but the scrollTo was one where I was struggling to cover all my bases, I thought an explicit polyfill would be fine.

It's a bit hacky, and there are probably ways to improve this approach, but for now my docs site at least runs in IE11. The layout isn't quite right because of CSS grid support. If I really wanted to, I think I'd be able to add some custom theme files to fix the layout.

[HiltonGiesenow]

@leahjlou I'm totally new to Docz but IE is really important for my site. Do you know if this fix would work if it's a completely Docz site (i.e. not added to an existing Gatsby site)? I want this specific site only for docs.

[rakannimer]

Hey @HiltonGiesenow

I'm not sure about the fix in particular but anything that works with docz as a gatsby theme in an existing site should work the same with docz as a stand-alone site.

[HiltonGiesenow]

Ok, it's probably just my limited knowledge of the tools to date. If I start with the standalone site, I don't seem able to edit the gatsby-config.js file - it get's overwritten