PR #90556: fix(css): rewrite MiniCssExtractPlugin insert function to ES5 to support legacy browsers

• Repository: vercel/next.js
• Author: sleitor
• State: closed | merged: True
• Link: https://github.com/vercel/next.js/pull/90556

Description (problem / solution / changelog)

What?

Rewrite the insert function passed to MiniCssExtractPlugin in packages/next/src/build/webpack/config/blocks/css/index.ts to use only ES5-compatible syntax.

Why?

The insert option of mini-css-extract-plugin serialises the function via Function#toString() and injects the resulting string directly into the webpack runtime chunk. This string bypasses all subsequent transpilation — it is not processed by Babel/SWC, and is not subject to the project's browserslist or output.environment webpack config.

The current function contains:

const { href, onload, onerror } = linkTag   // ES2015 destructuring
onload?.call(linkTag, ...)                  // ES2020 optional chaining

When the project targets legacy browsers (e.g. chrome >= 45) pages crash on load with:

Unexpected token {

before any CSS has been applied.

How?

Replace the destructuring with individual var declarations and replace optional chaining with explicit if null-checks:

Before:

const { href, onload, onerror } = linkTag
// ...
() => onload?.call(linkTag, { type: 'load' } as Event),
() => onerror?.call(linkTag, {} as Event)

After:

var href = linkTag.href
var onload = linkTag.onload
var onerror = linkTag.onerror
// ...
function () { if (onload) onload.call(linkTag, { type: 'load' } as Event) },
function () { if (onerror) onerror.call(linkTag, {} as Event) }

Runtime behavior is identical in all environments. The var style was intentionally chosen (over splitting const declarations) since no-var is disabled in the project ESLint config.

Fixes #90518

Changed files

• packages/next/src/build/webpack/config/blocks/css/index.ts (modified, +14/-3)