vite cjsInterop SyntaxError with MUI

[cjoecker]

Reproduction

1. Clone this repository
2. Run npm install
3. Run npm run build
4. Run npm run start

See the error on the console

System Info

Node 22.2.0, Mac OS.
It is also failing on earlier node versions

Used Package Manager

npm

Expected Behavior

CJS libraries work with vite and cjsInterop.

Actual Behavior

On build start commands, Remix is throwing the error

export { AdapterDateFns } from './AdapterDateFnsV3';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1350:18)
    at Module._compile (node:internal/modules/cjs/loader:1379:20)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1518:10)
    at Module.load (node:internal/modules/cjs/loader:1249:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1065:12)
    at cjsLoader (node:internal/modules/esm/translators:318:15)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:258:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:475:24)
    at run (/Users/christian/Documents/remix-bug-report/node_modules/@remix-run/serve/dist/cli.js:112:15)

Interestingly, it is working fine with npm run dev

I already tried ssr.noExternal on the vite config.

I also tried importing the package as

import pkg from "@mui/x-date-pickers/AdapterDateFnsV3/index";
const { AdapterDateFns } = pkg;

[souchi]

I have the same issue too.
　

Reproduction

Run npm run build

"npm run dev" work

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 2.28 GB / 7.85 GB
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (126.0.2592.56)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @remix-run/dev: ^2.9.2 => 2.9.2
    @remix-run/node: ^2.9.2 => 2.9.2
    @remix-run/react: ^2.9.2 => 2.9.2
    vite: ^5.3.1 => 5.3.1

    "@emotion/react": "^11.11.4"
    "@emotion/styled": "^11.11.5"
    "@mui/icons-material": "^5.15.20"
    "@mui/material": "^5.15.20"
    "@mui/x-date-pickers": "^7.7.0"
    "@emotion/react": "^11.11.4"
    "@emotion/styled": "^11.11.5"
    "vite-plugin-cjs-interop": "^2.1.1"
    "vite-tsconfig-paths": "^4.3.2"

This project was created with "npx create-remix@latest --template remix-run/remix/templates/spa".

vite.config.ts

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { cjsInterop } from "vite-plugin-cjs-interop";


export default defineConfig({
  plugins: [
    cjsInterop({
      dependencies: [
        "@mui/material/styles",  
        "@mui/material/Box",
        "@mui/x-date-pickers/DatePicker",
        "@mui/x-date-pickers/LocalizationProvider",
        "@mui/x-date-pickers/AdapterDayjs",        
      ]
    }),
    remix({
      ssr: false,
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
});

Used Package Manager

npm

Expected Behavior

I was expecting npm run build to finish successfully.

Actual Behavior

x Build failed in 1.21s
[remix] Unexpected token 'export'
C:\Users\a\b\c\node_modules\@mui\material\Box\index.js:3
export { default } from './Box';
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1280:20)
    at Module._compile (node:internal/modules/cjs/loader:1332:27)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:366:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24) {
  code: 'PLUGIN_ERROR',
  plugin: 'remix',
  hook: 'writeBundle'
}