javascriptgatsbybabel-preset-env

Polyfill using browserlist in Gatsby always provided


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?


Solution

  • 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.