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'
}

[jhartling]

I've been able to work around this issue with @mui/x-date-pickers by importing from:

import { AdapterDateFns } from '@mui/x-date-pickers/node/AdapterDateFnsV3';

[cjoecker]

@jhartling thanks for sharing your workaround!
With that, I can at least now start the server. But now, Typescript shows this error:

TS7016: Could not find a declaration file for module @mui/x-date-pickers/node/AdapterDateFnsV3.

[jhartling]

@cjoecker you should be able to ignore that error with a @ts-ignore or @ts-expect-error comment above the import! That'll set the type of AdapterDateFns to any. It's only passed to the provider and shouldn't impact your date picker usage.

[cjoecker]

@jhartling you are right but adding @ts-ignore anywhere in the code is not great. I hope the Remix team can work on a solution without a workaround.

[alanxp]

It happens exactly the same to me, only when doing a build and SSR is false. I need this to work on SPA, else i will have to use RR and see if this doesnt happen there

[alanxp]

It happens exactly the same to me, only when doing a build and SSR is false. I need this to work on SPA, else i will have to use RR and see if this doesnt happen there