What is the best practice for adding polyfills to support older browsers?

[sjfkai]

I am using React Router v7 in its framework mode.

I want to support the same browser compatibility as Vite's minimum target es2015:

Chrome >=64
Firefox >=67
Safari >=11.1
Edge >=79

Is there a better way to achieve this?

---

My current approach:

React Router v7's Scripts component depends on TextEncoderStream, which is only supported in Chrome >= 71 and Safari >= 14.1. I'm trying to polyfill it. Currently, the only way I've found to make this work is by including it via an HTML <script> tag in root.tsx. Importing it at the top of root.tsx or entry.client.tsx seems to be too late:

// root.tsx Layout
<script
  src="https://somecdn.com/TextEncoderStream.polyfill.js"
  type="text/javascript"
/>
<Scripts />

Additionally, my project uses React Query. I initially thought that polyfills for dependencies outside of React Router could be imported at the top of entry.client.tsx. However, after several attempts, I've found that these dependencies also require their polyfills to be included via an HTML <script> tag or imported at the very top of root.tsx to function correctly:

// top of root.tsx
import 'core-js/stable/global-this';
import 'core-js/stable/array/flat';
import 'core-js/stable/array/flat-map';
import 'abortcontroller-polyfill/dist/polyfill-patch-fetch';

This setup allows my project to run correctly in Chrome 64. However, the polyfills introduced above are also loaded in the latest versions of modern browsers, which is not what I want.

I'm wondering if anyone has a better implementation for this. Thanks!

[sergiodxa]

Please don't duplicate your question here and in Discord, choose one and wait for an answer to don't duplicate help efforts

The Discord link is https://discord.com/channels/770287896669978684/1376408046854733885

I'm closing this one in favor of Discord as it already has an answer