[pickers] Can't start project using MUI and Remix + Vite. SyntaxError: Named export 'AdapterLuxon' not found.

[tcov189]

Steps to reproduce

When trying to start a Remix + Vite project and MUI's LocalizationProvider with AdapterLuxon I get a SyntaxError.
This same project works when running the project in dev mode and/or when using Remix's built in compiler.

Link to live example: https://github.com/tcov189/remix-vite-mui-issue

Steps:

1. Pull down project and install node packages
2. Run npm run dev and see project runs
3. Run npm run build and see that there are no build errors
4. Run npm run start and see error in console

SyntaxError: Named export 'AdapterLuxon' not found. The requested module '@mui/x-date-pickers/AdapterLuxon/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:
...

Current behavior

Starting the project using npm run start results in the following error.

SyntaxError: Named export 'AdapterLuxon' not found. The requested module '@mui/x-date-pickers/AdapterLuxon/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:
...

Expected behavior

The project is able to start without errors.

Context

We are working on converting our CRA app to Remix + Vite.

We used this repo in order to get started and has been working using the Remix server.

As of v2.7, Remix now supports using Vite. When attempting to convert our app to use Vite, we start experiencing the error.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 13.2.1
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 121.0.6167.184
    Edge: Not Found
    Safari: 16.3
  npmPackages:
    @emotion/react: latest => 11.11.3 
    @emotion/styled: latest => 11.11.0 
    @mui/base:  5.0.0-beta.37 
    @mui/core-downloads-tracker:  5.15.11 
    @mui/lab: latest => 5.0.0-alpha.166 
    @mui/material: latest => 5.15.11 
    @mui/private-theming:  5.15.11 
    @mui/styled-engine:  5.15.11 
    @mui/system:  5.15.11 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.11 
    @mui/x-data-grid: latest => 6.19.5 
    @mui/x-date-pickers: latest => 6.19.5 
    @types/react: ^18.2.20 => 18.2.58 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.1.6 => 5.3.3 

Search keywords: remix vite

Search keywords:

[michelengelen]

For me it does not start with the ThemeProvider bein the source of error:

❯ npm run start

> start
> remix-serve ./build/server/index.js

file:///Users/michel/_work/remix-vite-mui-issue/build/server/index.js?t=1709029858736.2107:9
import { ThemeProvider } from "@mui/material/styles/index.js";
         ^^^^^^^^^^^^^
SyntaxError: Named export 'ThemeProvider' not found. The requested module '@mui/material/styles/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/styles/index.js';
const { ThemeProvider } = pkg;

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

@LukasTy could you try as well?

[LukasTy]

@michelengelen Isn't it the same ESM problem as with all the @mui packages? 🤔
mui/material-ui#37335
#11016
#8849

[michelengelen]

@michelengelen Isn't it the same ESM problem as with all the @mui packages? 🤔 mui/material-ui#37335 #11016 #8849

It certainly does seem like it. 🤔

[tcov189]

Thanks for looking at this @LukasTy and @michelengelen . I thought it might be related to the ESM problem, but thought it was weird that npm run dev works but npm run start doesn't.

[LukasTy]

@tcov189 If I'm not mistaken, the setup of the Dev and Build environments in Vite is pretty different.
Have you tried vite-plugin-commonjs as a temporary workaround? 🤔

[tcov189]

@tcov189 If I'm not mistaken, the setup of the Dev and Build environments in Vite is pretty different.
Have you tried vite-plugin-commonjs as a temporary workaround? 🤔

Hmm I have never heard of that plugin. I will give that a whirl.

[tcov189]

@LukasTy Just tried using the vite-plugin-commonjs package, didn't seem to have any effect. I pushed that change up to my repro repo, maybe I am not configuring it properly?

[raskyer]

I confirm it's the same issue with AdapterDateFns and it's pretty annoying.

Works in dev, do not in production with start cmd.

[raskyer]

But this seems to work :
https://stackoverflow.com/questions/78017516/vite-ssr-build-fails-with-mui-icons-and-date-time-picker

import { AdapterDayjs} from "@mui/x-date-pickers/node/AdapterDayjs";

[tcov189]

But this seems to work : https://stackoverflow.com/questions/78017516/vite-ssr-build-fails-with-mui-icons-and-date-time-picker

import { AdapterDayjs} from "@mui/x-date-pickers/node/AdapterDayjs";

Hmm that didn't work for me, I tried the import you provided and tried it using AdapterLuxon

[raskyer]

You need to remove the import commonjs from "vite-plugin-commonjs" from vite config

[raskyer]

Also change your import of ThemeProvider to : import { ThemeProvider } from '@mui/material';

And your import of blue should become : import { colors } from '@mui/material';
colors.blue

[tcov189]

You need to remove the import commonjs from "vite-plugin-commonjs" from vite config

Also change your import of ThemeProvider to : import { ThemeProvider } from '@mui/material';

And your import of blue should become : import { colors } from '@mui/material'; colors.blue

@raskyer This did it! I didn't realize there was even a node directory in that package.

Thanks for all the help!

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @tcov189?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.