@mui/icons-material breaks nextjs Serverless Function and gives timed out error when adding any icon at _app.tsx page

[dev-ahmedhany]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the 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

System:
    OS: macOS 13.0.1
  Binaries:
    Node: 16.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 108.0.5359.98
    Edge: Not Found
    Firefox: 102.0.1
    Safari: 16.1
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5 
    @emotion/styled: ^11.10.5 => 11.10.5 
    @mui/base:  5.0.0-alpha.109 
    @mui/core-downloads-tracker:  5.10.17 
    @mui/icons-material: ^5.10.16 => 5.10.16 
    @mui/material: ^5.10.17 => 5.10.17 
    @mui/private-theming:  5.10.16 
    @mui/styled-engine:  5.10.16 
    @mui/system:  5.10.17 
    @mui/types:  7.2.2 
    @mui/utils:  5.10.16 
    @types/react: 18.0.26 => 18.0.26 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 4.9.4 => 4.9.4 

[michaldudak]

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

[dev-ahmedhany]

worked!! Thanks

also searched and found a better Developer experience solution: using modularizeImports works well without having to fallback to babel. this makes the building process faster at Vercel servers

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

[dev-ahmedhany]

Can't we copy the material design icons importing system? this bug isn't there although they have more icons

[michaldudak]

I think this needs to be added to the docs

Would you like to open a PR?

Can't we copy the material design icons importing system? this bug isn't there although they have more icons

We are going to overhaul the packaging of all our libraries in v6 (and create proper ES modules).

[dev-ahmedhany]

done can you review it ? @michaldudak

[oliviertassinari]

Next.js did a PR to solve this problem directly with a default configuration: https://github.com/vercel/next.js/pull/50900.

[michaldudak]

@dev-ahmedhany does this problem still exist with the PR Olivier mentioned?

[oliviertassinari]

Closing per https://github.com/mui/material-ui/issues/35450#issuecomment-1612276423. Problem solved.