Почему не включается автоматом polyfil в Next.js для String.prototype.at в браузере EDGE v. 90

Question

Используя Next.js, я столкнулся с ошибкой "TypeError: at is not a function" при тестировании моего приложения в браузере Microsoft Edge 90. Я обнаружил, что метод String.prototype.at() не поддерживается в этой версии браузера. Использую Next.js 14

Answer 1

Next.js не включает по умолчанию полифил at для строк, только для массивов, список дефолтных полифилов - https://github.com/vercel/next.js/blob/canary/packages/next-polyfill-nomodule/src/index.js

Нашел отличное решение для подключения полифилов в сообщении пользователя - https://github.com/vercel/next.js/discussions/20992#discussioncomment-304190

Демо - https://codesandbox.io/s/nextjs-api-polyfill-y9gii?file=/pages/_document.js

const polyfillLibrary = require("polyfill-library");

const polyfillLibrary = require("polyfill-library");

export default async function handler(req, res) {
  const polyfillBundle = await polyfillLibrary.getPolyfillString({
    uaString: req.headers["user-agent"],
    minify: true,
    features: {
      Intl: {},
      "Intl.RelativeTimeFormat": {}
    }
  });

  const buf = Buffer.from(polyfillBundle, "utf-8");

  res.statusCode = 200;
  res.setHeader("Content-Type", "text/javascript");
  res.setHeader("Content-Length", buf.byteLength);
  res.end(buf);

Список полифилов для активации задается в поле features

Список полифилов можно получить с помощью

(async () => {
  const polyfills = await polyfillLibrary.listAllPolyfills()
  console.log(polyfills) // все полифилы
  const regExp = /\.at/
  const polyfillsFinded = polyfills.filter(str => regExp.test(str))
  console.log(polyfillsFinded) // полифилы для метода .at
})()

Так же необходимо подключить скрипт в _document.jsx

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* eslint-disable-next-line @next/next/no-sync-scripts */}
          <script src="/api/polyfills" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

БЛОГ НА HUSL

Почему не включается автоматом polyfil в Next.js для String.prototype.at в браузере EDGE v. 90

Ответы (1 шт):