4

I was experimenting with Gatsby and polyfills using browserlist, which is supported by Gatsby (doc).

Using the default browserlist config, I get the expected result which creates polyfills for IE11 and a working alert. See my github repo example. The site is currently available here at Netlify.

So, I can see in the produciton code how the arrow functions and the array.prototype.find function are polyfilled. Nothing weird so far.

Now, if I change the browserlist to last 2 Chrome versions and build production I would expect that the polyfill for the array find() method would dissappear since it is supported by chrome. However, I believe I can still find the same polyfills (from core-js) in app-2934fab61c547573181d.js:

    dRSK: function(t, e, n) {
        "use strict";
        var r = n("XKFU")
          , o = n("CkkT")(5)
          , i = !0;
        "find"in [] && Array(1).find((function() {
            i = !1
        }
        )),
        r(r.P + r.F * i, "Array", {
            find: function(t) {
                return o(this, t, arguments.length > 1 ? arguments[1] : void 0)
            }
        }),
        n("nGyu")("find")
    },

So my question is: why are these polyfills still available, even when I use a browserlist query which obviously wouldn't need this?

Albert Skibinski
  • 499
  • 4
  • 21

1 Answers1

2

This might sound a bit crazy but "It works on my machine" :)

I ran npm run build in your repo and the bundle contained the find polyfill - which is expected since browserslist is [">0.25%", "not dead"].

Changing browserslist to ["last 2 Chrome versions"] didn't change anything in the build - find was still there.

After some experimenting I noticed that any browserslist change was ignored.

So I tried this:

  1. changed browserslist in package.json
  2. ran npm run clean - removes .cache and public
  3. ran rm -rf node_modules
  4. ran npm install
  5. ran npm run build: and find polyfill is gone!

Hope this works for you!

I don't have a logical explanation for this.

PS: in the docs they do recommend to clean after editing package.json - details. Reinstalling node_modules seems a bit extreme but it seems to solve it.

bamse
  • 4,243
  • 18
  • 25
  • Indeed, removing node_modules is necessary. Gatsby clean is not enough. But it seems weird to have to do this, feels like a bug? Gonna investigate some more. – Albert Skibinski Feb 12 '20 at 19:46
  • Feels like a bug. _Feels_ almost like the needed polyfills are added when installing node_modules. Not sure. This is the proverbial "have you tried turning off and on again?" :) – bamse Feb 12 '20 at 20:12
  • I created an issue for this: https://github.com/gatsbyjs/gatsby/issues/21423 – Albert Skibinski Feb 16 '20 at 14:37