Vercel pages/api deployment fails silently with @mui/icons-material barrel import

[cvanem]

Verify canary release

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

Provide environment information

The problem only occurs after deployment on Vercel.

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

No response

Link to the code that reproduces this issue

https://github.com/cvanem/vercel-wildcard-import-reproduction

To Reproduce

1. Deploy this code to vercel: https://github.com/cvanem/vercel-wildcard-import-reproduction
2. Once deployed, try to navigate to the /api/hello endpoint (it will fail/timeout)

Here is a live example of the above repository: https://vercel-wildcard-import-reproduction.vercel.app/
Here is a live example of the api timeout: https://vercel-wildcard-import-reproduction.vercel.app/api/hello

To reproduce (explained in code):

1. Use a barrel import from "@mui/icons-material"; and use the imported component in the _app.tsx file.
2. Use the standard api/hello serverless function.
3. Deploy to vercel, and try to navigate to the /api/hello endpoint (you should get a timeout)
4. Example Code:

In _app.tsx import this:
import { Phone } from "@mui/icons-material"; 

In _app.tsx use:
<Phone/>

or

1. Use: import * as Icons from "@mui/icons-material"; and use <Icons.Phone/> in the _app.tsx file.
2. Use the standard api/hello serverless function.
3. Deploy to vercel, and try to navigate to the /api/hello endpoint (you should get a timeout)
4. Example Code:

In _app.tsx import this:
import * as Icons from "@mui/icons-material"; 

In _app.tsx use:
<Icons.Phone/>

Describe the Bug

Not sure exactly where this belongs as it seems to be an issue with the Vercel deployment process, as the build logs don't show any issues and everything works correctly when run locally. The website will deploy correctly with no errors, but when you try to navigate to an api endpoint, you will get a 504 gateway timeout error.

My best guess of the problem, is that the Vercel deployment or spin-up process is hitting some kind of limitation or running into an error trying to resolve the @mui/icons-material imports.

A few notes:

• The issue only seems to occur if the above import methods are used in the _app.tsx file. If you use a * or barrel import in pages/index.tsx, then those will work correctly.
• If you use a direct import (import Phone from "@mui/icons-material/Phone"), then the issue is resolved.

Expected Behavior

I would expect the api/hello endpoint to work correctly when deployed to Vercel.

I would also expect to be able to use barrel imports or import * statements as needed. I have never had an issue using these previously.

I would also expect some kind of error to be shown somewhere if there is a problem, currently there is no indication that a deployment error occurred. You have to manually navigate to the api endpoint to see the timeout issue.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

[JanderSilv]

Same problem here.

[rtaylor205]

Ran into this, don't believe it's a Vercel issue - I ended up deploying on Netlify and had the same issue.

Workarounds are in here mui/material-ui#35450, but I'd love to know why this only happens when it's hosted externally, I can't replicate locally even with a production build.

[nextjs-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!

[github-actions]

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