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

[tcov189]

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

[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?

[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";

[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!

[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.

[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

[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.