Make Vite support optional chaining on old browsers

To make Vite support old browsers, you need to transpile modern JavaScript code down to a version that is compatible with older browsers.

  1. Install Required Packages
1
npm install --save-dev @vitejs/plugin-legacy terser

or

1
yarn add --dev @vitejs/plugin-legacy terser

  1. Add Legacy Plugin to Vite Configuration

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    import { defineConfig } from "vite";
    import react from "@vitejs/plugin-react";
    import legacy from "@vitejs/plugin-legacy";

    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        legacy({
          targets: ["defaults", "not IE 11"],
        }),
        react({
          babel: {
            plugins: ["@babel/plugin-proposal-optional-chaining"],
          },
        }),
      ],
    });