Opt into Babel transpilation in gatsby-plugin-theme-ui (?)

[aaronadamsCA]

I'm getting an IE 11 error on my Gatsby production site, despite using its standard Babel config that should support IE 11.

This line is responsible:

theme-ui/packages/color-modes/src/index.tsx

Line 62 in 4b34c2c

document.documentElement.classList.forEach((className) => {

Unfortunately IE 11 doesn't implement NodeList.forEach.

It should be possible for a module to opt into Gatsby's Babel transpilation by adjusting its Webpack configuration in gatsby-node.js. I think that would be a good feature to add to gatsby-plugin-theme-ui, to opt in theme-ui and @theme-ui/*, so that the theme is always transpiled by Babel to be compatible with the set of browsers defined in the site's Babel configuration.

As far as I can tell, since Gatsby v3 includes core-js v3, and core-js v3 includes a polyfill for NodeList.forEach, this should be working out of the box. 🤷‍♂️

[hasparus]

Thanks for the issue, @aaronadamsCA!

[aaronadamsCA]

No problem @hasparus, after further investigation I got the feeling it was upstream:

gatsbyjs/gatsby#30473

Looks like it'll be fixed in the next Gatsby point release. 👍

[aaronadamsCA]

Gatsby has fixed the upstream problem, and Theme UI no longer supports IE 11 anyway, so I'm closing this. Thanks!