Comments (14)
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?
from mui-x.
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";
from mui-x.
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
from mui-x.
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!
from mui-x.
@michelengelen Isn't it the same ESM problem as with all the @mui
packages? 🤔
mui/material-ui#37335
#11016
#8849
from mui-x.
@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. 🤔
from mui-x.
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.
from mui-x.
@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? 🤔
from mui-x.
@tcov189 If I'm not mistaken, the setup of the
Dev
andBuild
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.
from mui-x.
@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?
from mui-x.
I confirm it's the same issue with AdapterDateFns and it's pretty annoying.
Works in dev, do not in production with start cmd.
from mui-x.
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
from mui-x.
You need to remove the import commonjs from "vite-plugin-commonjs" from vite config
from mui-x.
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.
from mui-x.
Related Issues (20)
- [pickers] Page fails to load Date Picker Component with Joy UI using CssVarsProvider Wrapper HOT 5
- [charts] Improve default color contrast in dark mode HOT 9
- [RFC] Move to a more modular structure for tests in code and CI HOT 4
- Add Audio Player/Waveform component HOT 2
- [charts] Cannot scroll the page when touch inside the chart HOT 7
- [data grid] Pivoting ETA HOT 4
- Pie Chart shows a slice for 0 value whenever the object representing a 0 is last in the array HOT 2
- [DataGrid] CSV export negative numbers in string has quotation HOT 3
- [data grid] Is there a way to override the default copy/paste functionality in DataGrid? HOT 7
- New sets of components HOT 6
- [charts] BarChart legend overlaps charts area HOT 3
- [pickers] Recipes HOT 1
- [data grid] I want to add Apply and Cancel buttons to the GridToolbarFilterButton HOT 5
- [pickers][DateTimeRangePicker] Manually selecting the date then selecting the time in the popover reverts the date to today HOT 2
- [charts] Support single color area chart HOT 9
- [data grid] Row pinning with Server-side tree data HOT 3
- [data grid] `isRowSelectable` lags behind state updates HOT 1
- [charts] Replace `d3-color` by CSS filter
- [data grid] On callapsing an expanded row, the nested table/container retains the size of expanded state HOT 1
- [pickers] Inconsistent design of DatePicker and DateRangePicker HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.