-
-
Notifications
You must be signed in to change notification settings - Fork 32k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
@mui/icons-material breaks Next.js Serverless Function and gives timed out error when adding any icon at _app.tsx page #35450
Comments
Try importing just the icon you need instead of the whole package: https://mui.com/material-ui/guides/minimizing-bundle-size/#option-one-use-path-imports -import { Person } from "@mui/icons-material";
+import Person from "@mui/icons-material/Person"; |
worked!! Thanks also searched and found a better Developer experience solution: const nextConfig = {
reactStrictMode: true,
experimental: {
modularizeImports: {
"@mui/material": {
transform: "@mui/material/{{member}}",
},
"@mui/icons-material": {
transform: "@mui/icons-material/{{member}}",
},
},
},
}; I think this needs to be added to the docs |
Can't we copy the material design icons importing system? |
Would you like to open a PR?
We are going to overhaul the packaging of all our libraries in v6 (and create proper ES modules). |
mui#35450 Signed-off-by: Ahmed Hany <39633124+dev-ahmedhany@users.noreply.github.com>
done can you review it ? @michaldudak |
Next.js did a PR to solve this problem directly with a default configuration: vercel/next.js#50900. |
Fixes #51872. We were exploring in mui/material-ui#35457 the option to move the `modularizeImports` config to our Next.js examples to fix mui/material-ui#35450 however, we never got to complete the work. We are not yet in a position where we can apply modularizeImports to `@mui/material`. We still have folders to create to make it work. Maybe we should close mui/material-ui#35457? Co-authored-by: JJ Kasper <jj@jjsweb.site>
@dev-ahmedhany does this problem still exist with the PR Olivier mentioned? |
Closing per #35450 (comment). Problem solved. |
Duplicates
Latest version
Steps to reproduce 🕹
Link to live example:
https://github.com/dev-ahmedhany/nextjs-mui-bug
Steps:
1.get nextjs starter template
2.add icon from @mui/icons-material to _app.tsx
Current behavior 😯
Serverless Function has timed out
Expected behavior 🤔
Serverless Function to work
Context 🔦
It made me use material design icons instead of @mui/icons-material
Your environment 🌎
npx @mui/envinfo
the problem only at web , It works at localhost
The text was updated successfully, but these errors were encountered: