Add the last JS-features to the next-polyfill (e.g. findLast and findLastIndex)

[Danilqa]

Goals

1. Provide the opportunity to use the last JavaScript features on the old devices. Especially, findLast and findLastIndex.

Non-Goals

No response

Background

We used findLastIndex in our code and came across in production that some mobile phones doesn't support this feature. Polyfill.io doesn't contain it as well.

Proposal

I want to do the following:

1. Investigate what else should be added
2. Upgrade core-js to 3.29.0 in @next/polyfill-nomodule
3. Add all needed imports in next-polyfill-nomodule/src/index.js
4. Add these features to no-unwanted-polyfillio.ts

[TkDodo]

I find it concerning that there are many polyfills missing in nextJs, when it is claimed that:

Next.js supports modern browsers with zero configuration.

Chrome 64+
Edge 79+
Firefox 67+
Opera 51+
Safari 12+

https://nextjs.org/docs/basic-features/supported-browsers-features

I also want to question that adding polyfills to next-polyfill-nomodule is a fix for most browsers. Let me link to my comment from the Array.at polyfill PR and also copy it here:

• Polyfill Array.prototype.at #44436 (comment)

I'm generally wondering - how does adding the polyfill to next-polyfill-nomodule fix the issue? The nomodule polyfill is added as a <script nomodule to the page, so it will be only executed by very old browsers, e.g. Safari < 11.

For browsers that understand nomodule, only these polyfills are included:

• https://github.com/vercel/next.js/blob/v13.2.3/packages/next-polyfill-module/src/index.js

and Array.at is not part of it.

However, Array.at was only introduced in Safari in version 15.4

Doesn't that mean that all Safari version between 11 and 15.4 will not understand Array.at and will also not get it polyfilled by next?

---

So from my understanding, all browsers that are more modern than Edge 16, Firefox 60, Chrome 61, Safari 10.1 would only get the polyfills from next-polyfill-module (because they are ignoring the nomodule script), which, when looking at the source, is only a handful of polyfills:

• string trimStart / trimEnd
• symbol description
• array flat
• promise finally
• object fromEntries

I've stumbled upon this because one of our users was using Safari 15.1, where Object.hasOwn doesn't exist (it is introduced, like Array.at, in 15.4), and there was no polyfill from next.

So, I'm really confused by this behaviour and I hope that I am missing something obvious, because adding more polyfills to next-polyfill-nomodule is nice, but won't help those in-between browsers ...

[jamesvclements]

+1 landed here after realizing findLastIndex only worked in dev and broke the deploy

[senritsu]

same here, at least it wasn't on prod yet 😄

[karlhorky]

For Array.prototype.findLastIndex, we're using this ES5 polyfill:

// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Polyfill for older browsers eg. Safari 15.1
if (typeof window !== 'undefined' && !Array.prototype.findLastIndex) {
  // eslint-disable-next-line no-extend-native -- Polyfill for older browsers eg. Safari 15.1
  Array.prototype.findLastIndex = function (callback, thisArg) {
    for (let index = this.length - 1; index >= 0; index--) {
      if (callback.call(thisArg, this[index], index, this)) return index;
    }
    return -1;
  };
}

If you need ES3 compatibility for ancient browsers or other environments, @ljharb created a polyfill array.prototype.findlastindex

[ljharb]

or if you want spec compliance :-) your snippet deviates in a number of ways (mostly around error conditions and observable lookups)