Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Next.js 13 compatibility (app directory/server components)

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Summary 💡

MUI doesn’t work in Next.js 13 server components (app directory). Even though the error comes from @emotion\react and not Material UI itself, I think this should be tracked here as well.

The “primary” error (there might be other problems once the Emotion issue is fixed) is:

TypeError: React.createContext is not a function (sc_server)\node_modules@emotion\react\dist\emotion-element-b63ca7c6.cjs.dev.js (20:47)

Related Emotion issue: https://github.com/emotion-js/emotion/issues/2928

Examples 🌈

I’ve created a minimal (failing) example using create-next-app: https://github.com/MidnightDesign/nextjs13-material-ui

Motivation 🔦

No response

Issue Analytics

State:
Created a year ago
Reactions:21
Comments:5 (5 by maintainers)

Top GitHub Comments

24reactions

mnajdovacommented, Oct 28, 2022

@mnajdova Since your https://github.com/mui/material-ui/issues/34905 seems to be the umbrella issue now, feel free to edit this one to be just about the specific problem with Emotion.

Sure, I plan to work on this on Monday, will review once again all the issues.

1reaction

MidnightDesigncommented, Oct 27, 2022

@mnajdova Since your #34905 seems to be the umbrella issue now, feel free to edit this one to be just about the specific problem with Emotion.

Top Results From Across the Web

Blog - Next.js 13

The app/ directory introduces support for React's new Server Components architecture. Server and Client Components use the server and the client ...

What's New in Next.js 13 - AppSignal Blog

js 13 is that all components inside the app directory are React Server Components by default, including special files and colocated components ( ......

What's new in Next.js 13, and what do they really do?

How real-world code and architecture need to adapt to Server Components, ... /pages directory, but everything you put in /app uses Next.js 13's...

What and Why: React Server Components in Next.js 13

js 13 introduced app directory architecture which is an entirely new way to architect your Next.js applications with React Server Components in ...

LeafLet implementation on Next JS 13 - reactjs - Stack Overflow

you are using the new app/directory routing or the pre-existing pages routing to load leaflet components? – João Danilo Zucolotto. Nov 2 at...