Next JS weird routing behavior

The behavior of routing changes when I import in a different syntax.

Bug syntax:


import { ShoppingCart } from '@mui/icons-material'

When I have this line to import from Material UI, the routing on my NextJS breaks. All not designated routes and api routes will result in a 502 timeout.

Fix:

import ShoppingCart from '@mui/icons-material/ShoppingCart'

When I use this line to import, all non designated routes return a 404(instead of 502) and api routes work.

Example:
Lets say my site is somesite.netlify.app with no subroutes.
If I import with the first syntax, and go to somesite.netlify.app/badroute, it runs for 10 seconds until a 502 timeout occurs.

If I import using the second syntax, and go to somesite.netlify.app/badroute, I see the 404 page.

This behaviors does not happen when running nextjs locally, or with the command netlify dev

I figure that we should be deploying with the second way as per mui’s documents, but this is surely a weird event

It’s possible that there is a bug or compatibility issue with theimport syntax on your site causing it to interfere with your site’s routing. Alternatively, it could be that the named import syntax is not properly handling the icon and causing some unexpected behavior.