How to Make a Frontend Work on an Outdated Browser (Firefox 60.0, RHEL 7.7) or Chrome outdated version?

[bwithai]

First Check

• I added a very descriptive title here.
• I used the GitHub search to find a similar question and didn't find it.
• I searched in the documentation/README.
• I already searched in Google "How to do X" and didn't find any information.
• I already read and followed all the tutorial in the docs/README and didn't find an answer.

Commit to Help

• I commit to help with one of those options 👆

Example Code

//----------------------------------------------> vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
import legacy from "@vitejs/plugin-legacy";

export default defineConfig({
  plugins: [
    react(),
    TanStackRouterVite(),
    legacy({
      targets: [
        "ie >= 11",      // Internet Explorer 11+
        "firefox >= 40", // Firefox 40+
        "chrome >= 39",  // Chrome 39+ (similar era)
        "safari >= 9",   // Safari 9+ (2015)
      ],
      modernPolyfills: true, // Enables automatic modern API polyfills
      additionalLegacyPolyfills: [
        "regenerator-runtime/runtime", // For async/await support
        "core-js/stable",              // Provides missing ES6+ methods
        "whatwg-fetch",                // Polyfills fetch() for old browsers
      ],
    }),
  ],
  build: {
    target: "es5", // Transpile to ES5 for full legacy support
  },
});


//----------------------------------------------> main.tsx
// ✅ Add these polyfills at the top for legacy browser support
import "core-js/stable";              // Ensures ES6+ features work in older browsers
import "regenerator-runtime/runtime"; // Provides async/await support
import "whatwg-fetch";                // Polyfills fetch() for older browsers
// rest of updated code of main.tsx

Description

I have containerized my application and exported the following Docker images:

• adminer
• traefik
• frontend
• backend
• db

I imported these images into an intranet server (RHEL 7.7, no internet access) and started them using docker compose up -d. Everything runs fine, and the backend reports a healthy status.

However, when I try to access the frontend using Firefox 60.0 (Quantum), the page doesn’t load properly. The browser console shows this error:
SyntaxError: expected expression, got '?' in src='/assets/index-BQ5s1TCL.js'

This suggests that modern JavaScript syntax—like optional chaining (?.) or nullish coalescing (??)—is present in the built files, which Firefox 60.0 doesn’t support.

What I Tried
I updated my vite.config.ts to include @vitejs/plugin-legacy, which allowed the page to load, but the UI is completely broken and difficult to use.

My Question
How can I properly configure Vite (or adjust my build process) to ensure compatibility with outdated browsers without breaking the UI?

Any suggestions on Vite settings, Babel configuration, or alternative solutions would be greatly appreciated.

Operating System

Other

Operating System Details

I use Docker to run my application, so there are no OS dependency issues affecting the frontend.

Python Version

3.10

Additional Context

My goal is to make this template compatible with any outdated browsers, not just Firefox 60.0, so that it can run in environments with legacy systems.