Serverless Function has timed out if adding any icon from @mui/icons-material at _app.tsx page

[dev-ahmedhany]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

The bug at Vercel's server (or netlify) not at localhost

Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.1.0: Sun Oct 9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103
Binaries:
Node: 16.18.0
npm: 8.15.0
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.0.6
eslint-config-next: 13.0.6
react: 18.2.0
react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue

https://github.com/dev-ahmedhany/nextjs-mui-bug

To Reproduce

any icon from @mui/icons-material at _app.tsx page

Describe the Bug

getting error Serverless Function has timed out at any serverless function if added any icon from @mui/icons-material at _app.tsx page

Expected Behavior

running the serverless function

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

vercel, netlify

[smaeda-ks]

@dev-ahmedhany
Have you checked #23187 (comment) ?
See also: https://mui.com/material-ui/guides/minimizing-bundle-size/#development-environment

[balazsorban44]

See the above, and also: https://nextjs.org/docs/advanced-features/compiler#modularize-imports

[dev-ahmedhany]

@balazsorban44

modularize-imports worked the best

this general version didn't work

// next.config.js
module.exports = {
  experimental: {
    modularizeImports: {
      'my-library/?(((\\w*)?/?)*)': {
        transform: 'my-library/{{ matches.[1] }}/{{member}}',
      },
    },
  },
}

i had to write this

const nextConfig = {
  reactStrictMode: true,
  experimental: {
    modularizeImports: {
      "@mui/material": {
        transform: "@mui/material/{{member}}",
      },
      "@mui/icons-material": {
        transform: "@mui/icons-material/{{member}}",
      },
    },
  },
};

minimizing-bundle-size falling back to babel it fixes the bug but slow at build at Vercel servers

Is there any relation between serverless function and _app file that I can make benefit from?

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.