Are you using the /pages or /app directory for your application?

/app directory

How did you implement support for emotion? Did you start with the MUI template, or copy and paste stuff from github?

I think I started with the MUI template.

I basically just installed emotion with npm. npm install @mui/material @emotion/react @emotion/styled

that is probably the issue

What should I do to fix the issue?

If you aren't extremely motivated to use the /app dir wait until the support from MUI and Emotion is more enthusiastic. Otherwise, I am using them together with the template project provided with MUI and it does work OK! https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts

If you are the sort of person that likes to add stuff from an empty project, these are the particular files that enable support: https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry

This function is really it: https://github.com/mui/material-ui/blob/master/examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/EmotionCache.tsx#L46-L66

Thanks! MUI and emotion does work fine in production mode, just not dev mode. I think I will switch to something like DaisyUI which supposedly works with the /app directory for now.

I have been on an entire adventure of considering switching away from MUI, but the real production-ready component libraries not using css-in-js are nonexistent

The difference between working in production and dev has to do with reconciliation/hydration stuff, and the example above definitely does fix it.

I am using a hybrid strategy for a project where the actual widgets like menus/buttons/inputs are MUI in use client, but using tailwindcss instead of the sx prop, and not using any of MUI's document layout stuff like Typography

honestly the pages are much faster now, and although skeptical at the beginning, it is actually working quite well.

Looking at the example above, do I just need to create a Theme/ThemeRegistry directory and add these three files in it in order to use MUI? https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry

Is there anything else I need to do?

You have to wrap with the provider in the root layout too

And obviously implement the dependency tree from the provider

I did this but I am still seeing the hamburger icon/mobile view on desktop.

Can you elaborate on how to do this? I would appreciate it. Thanks

My files are near identical to the ones in the repository you shared

I'm not using the hybrid strategy. I'll try that and replace the sx prop

Screw it, screw Next.js app directory and MUI for now. I love the app directory and I think its quite nice, but I really want to use MUI for my current project and I don't think the hassle of trying to optimize it for Nextjs is worth it. I will stick to Reactjs for now.

I am getting the same issue in normal React and even Vite. idk what's going on

Next.js pages dir is pretty much "just react" as you are saying, and MUI is really well supported there

How are you styling the navbar break? Is it with just media queries, or are you implementing a breakpoint with JS somehow?

Thanks so much for taking the time to help me with this.

Here is a reddit post I made. It includes the code for the navbar component. https://www.reddit.com/r/reactjs/comments/14lzxq3/reactvitenext_app_works_fine_in_production_mode/

The same component was used in Next.js, the create-react-app application, and Vite application.

I even tried copying and pasting a responsive navbar directly from the MUI website, but the issue still persisted on Next, CRA, and Vite. The navbar is responsive in production mode but not dev mode.

I mentioned in this comment that I checked to see if React/Next was detecting my device to be a mobile device in dev mode, and that is not the case. https://www.reddit.com/r/react/comments/14me7n5/comment/jq1vcy7/?utm_source=share&utm_medium=web2x&context=3

I even installed this node package to see what kind of device the website thinks I am using. https://github.com/Jam3/detect It clearly knows the website is being accessed from a desktop but yet still generates a mobile view in dev mode.

The website works fine on other browsers, just not Chrome. Must be some issue with Chrome then

@Cordilleran Flycatcher The code you have posted on reddit isn't even a valid react component?

See here - https://pastebin.com/wUbMKDmp

ok, I just didn't see the start of the function hiding with the imports

The issue is with the Chrome browser. In Guest mode on Chrome and on other browsers like Microsoft Edge, everything is fine in dev mode. Something is up with the chrome dev tools when I am in my user account on Chrome.

did you write all of this yourself, or is it a template from somewhere?

the code for the navbar? it is taken from MUI. It is a combination of the App bar with responsive menu
and Responsive App bar with Drawer from here - https://mui.com/material-ui/react-app-bar/

I know what the MUI parts, just all of the rest of the code around them?

Yea they were all taken from the MUI site and modified slightly for my project

The issue has been fixed! Thanks for all the help! Case closed.

I am unable to duplicate the failure in codesandbox

what was the issue>

that would certainly do it!

Good luck on your project!

Thanks! and thank you for all your help!