How to use a dependency that uses "require" when building an app with Vite?

Question

I have an app (Vite + React) that depends on a library that makes use of dynamic imports in the form of:

const { T } = useLocale(({ locale }) => require(`./i18n/${locale}.json`));

Unfortunately, I can't seem to be able to build my app due to this line. When I attempt to build with Vite, I get errors such as:

Not supported dynamic import, file:/Users/borne/Work/prototype/node_modules/@internal/top-navigation/es/Navigation.js

I added the legacy plugin to my configs, as well as the CommonJs solution as described here:

https://www.npmjs.com/package/@originjs/vite-plugin-commonjs

But it didn't seem to change anything.

This is my config:

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';
import babel from 'vite-plugin-babel';
import { viteCommonjs, esbuildCommonjs } from '@originjs/vite-plugin-commonjs';
import legacy from '@vitejs/plugin-legacy';

const fs = require('fs');

export default defineConfig({

    plugins: [
        viteCommonjs(),
        babel(),
        react({
            babel: {
                parserOpts: {
                    plugins: ['decorators-legacy']
                }
            },

        }),
        legacy({
            targets: ['defaults', 'not IE 11']
        }),
    ],
    optimizeDeps: {
        esbuildOptions: {
            plugins: [
                esbuildCommonjs([
                    '@internal/top-navigation',
                ]),
            ],
        },
    },

    server: {
        hmr: {
            clientPort: 443,
        },
        https: {
            key: fs.readFileSync('./.cert/key.pem'),
            cert: fs.readFileSync('./.cert/cert.pem'),
        },
    },
    define: {
        'process.env': {},
        'global': {}
    }
})

What am I missing?