Importing a locale breaks the producition build

[npapagna]

Steps to reproduce:

1. Edit the theme.ts file to add a locale:

import { createTheme, colors } from "@mui/material";
import {esES} from "@mui/material/locale";

// Create a theme instance.
const theme = createTheme({
  palette: {
    mode: "dark",
    primary: {
      main: "#556cd6",
    },
    secondary: {
      main: "#19857b",
    },
    error: {
      main: colors.red.A400,
    },
  },
}, esES);

export default theme;

2. run npm run build
3. run npm run start
4. Notice the command fails with the following error:

import { esES } from "@mui/material/locale/index.js";
         ^^^^
SyntaxError: Named export 'esES' not found. The requested module '@mui/material/locale/index.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@mui/material/locale/index.js';
const { esES } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at ModuleJob.run (node:internal/modules/esm/module_job:190:5)

I believe this is why the MUI+Remix example from MUI has serverModuleFormat: 'cjs'.

I tried this:

// vite.config.ts

import {vitePlugin as remix} from "@remix-run/dev";
import {installGlobals} from "@remix-run/node";
import {defineConfig} from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

installGlobals();

export default defineConfig({
    plugins: [
        remix({serverBuildFile: 'index.cjs', serverModuleFormat: 'cjs'}),
        tsconfigPaths()],
});

But the server fails for another reason:

remix-serve ./build/server/index.cjs 

/Users/nicopm/WebstormProjects/npapagna/remix-mui/node_modules/@mui/material/locale/index.js:1
export const amET = {
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Function.Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Module.<anonymous> (/Users/nicopm/WebstormProjects/npapagna/remix-mui/build/server/index.cjs:11:18)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)

Looking at the package.json definition in node_modules/@mui/material/locale/package.json, It looks like require is trying lo load the ESM module instead the CJS one:

{
  "sideEffects": false,
  "module": "./index.js",
  "main": "../node/locale/index.js",
  "types": "./index.d.ts"
}

// build/server/index.cjs:11:18

const index_js = require("@mui/material/locale/index.js");

Is there a way to make this work? Thanks in advance!