Gatsby: Map and Set Polyfill clarification

[chrisdl]

Hey

I was reading the documentation:

https://www.gatsbyjs.org/docs/browser-support/#note-about-ie--11

And it has a note about IE < 11, if I am understanding it correctly I should install core-js and add

import 'core-js/es/map';
import 'core-js/es/set';

Somewhere.

Do I need to do this if I want to support IE 11 and perhaps 10? Or is this handled by Gatsby? If I do add these imports, where would I do so? gatsby-browser.js?

I've also edited by browserslist:

"browserslist": [
    ">0.8%",
    "ie >= 11",
    "not op_mini all",
    "not dead"
  ]

I just feel like the docs are a little unclear about the actual method for adding polyfills for browser support.

Thanks!

[onestopjs]

I think importing the polyfills in gatsby-browser.js will do the job. I haven't tested it though, so it would be great if you can test it and share the results.

You are right the docs are a bit unclear, although I am not sure where it is best to be mentioned.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[mendaomn]

Would love to help with this. I'll test https://github.com/gatsbyjs/gatsby/issues/16945#issuecomment-525423492 and report back!

[mendaomn]

So here's what I've found:

Set and Map seem to be polyfilled

The default Gatsby project (gatsby new my-project) does seem to include Set and Map polyfills. To be more precise, I've found in the generated bundle the same lines of code exported by core-js/es/set

For reference, here's the code included in the generated bundle:

n(73)("Set", (function (t) {
  return function () {
    return t(this, arguments.length > 0 ? arguments[0] : void 0)
  }
}), {
  add: function (t) {
    return r.def(o(this, "Set"), t = 0 === t ? 0 : t, t)
  }
}, r)

Gatsby should add polyfills for your target browsers

The docs specify that:

Gatsby leverages Babel 7’s ability to automatically add polyfills for your target browsers.

More related to this issue, they also make the following example (emphasis mine):

If you start using a newer JavaScript API like [].includes that isn’t supported by some of your targeted browsers, you won’t have to worry about it breaking the older browsers as Babel will automatically add the needed polyfill core-js/modules/es7.array.includes.

---

In light of this, I would suggest that we remove the part in the docs that suggests to polyfill Map and Set in order to support IE < 11.

It still isn't all that clear how to manually add polyfills to the bundle, as according to the docs gatsby-browser.js should be used to interact with Gatsby's browser APIs.

Personally, I would try the wrapPageElement API and wrap every page in a Component that includes the polyfill, but it's a weird solution and I suppose there's a better way!

[chrisdl]

Thanks for doing the leg work @mendaomn so babel (7 and up) ended up doing the polyfilling. :+1:

Want me to close this thread now @gatsbybot ? =)

[mendaomn]

No problem! What do you think about removing the part in the docs that says you should polyfill Map and Set yourself?

As you experienced, it might lead to confusion I think :)

[gillkyle]

Thanks for the research on this! It looks like changes were merged that would handle transpilation of node_modules here. I think that aligns with @mendaomn's findings and I'm guessing the commit adding supporting those polyfills is an artifact of the note in the React docs about supporting older browsers that might be necessary in React if you aren't using something like Gatsby or create-react-app.

If someone would like to take this on and remove that from the docs, and open a PR it'd be much appreciated 🙂 I'll mark this as Hacktoberfest and Help Wanted, if one of you would like to claim it wel can mark it as Hacktoberfest - Claimed

[jbutz]

@gillkyle I've got the time to knock this out today if no one else has claimed it.

[gillkyle]

Awesome thanks @jbutz! I see your commit referenced this issue but I don't see a PR yet, feel free to create one and we can get this merged 🙂

[jbutz]

@gillkyle I threw together the code changes since they were so small, but wanted to give people a chance to respond. No sense stealing Hacktoberfest credit away from people who reported an issue or did the research. 😉

PR is now open

[gillkyle]

Yeah good point @jbutz, thanks for being so courteous, since I just barely added the Hacktoberfest label today I'll merge the PR.

If anyone else is in this thread is interested in getting something merged for Hacktoberfest I'd be happy to pair with you and get something merged into Gatsby 🙂

[mendaomn]

That would be awesome! I'd love to contribute to Gatsby @gillkyle

[gillkyle]

Hey @mendaomn I just put up another issue in #18329 that I think is a really low barrier to entry addition you could make if you'd like, I marked it as claimed already, but if you don't feel like you'll be able to get to it I can open it back up to the rest of the community.