DEV Community

Next.js + MUI v5 + Typescript tutorial and starter

Hosein Pouyanmehr on December 23, 2021

If you're just looking for a quick start or in other words for a starter, you can check and download the result of this post on GitHub. T...

Read full post

ajjack50n • May 17 '22

hey, this is a great post thank you!

I have a question, though, when I follow those steps, I find my pages jump. It seems styles are not applied until about a second after load - depending on complexity of page. Does anyone else see this?

Hosein Pouyanmehr • Jun 28 '22

Hi again,
As an update to my previous answer, this wasn't an MUI issue. You can read in this issue about that. The problem is from Next.js (Check the issue from here), and it'll be fixed in 12.1.7.

ajjack50n • Jun 28 '22

Thank you… appreciate this update as at 12.1.6 the issue still persists. I had heard that it didn’t show in the latest builds but waiting for the stable release.

Hosein Pouyanmehr • May 31 '22

Hi,
You're welcome. I am glad if it was helpful.

Sorry for the delay. There isn't a lot of free time for me right now.
Currently, MUI isn't fully compatible with React version 18, and I think your issue is about that. So, if you're using that version of react and react-dom, downgrading it to version 17 will solve it.

If you don't use v18, providing a sandbox may help to find out the problem.

Adam Siekierski • May 23 '22

I have that issue. Did you manage to resolve it?

Hosein Pouyanmehr • Jun 28 '22

Hi,
This is actually related to Next.js, and checking this issue may be useful.

Esteban Trejos • Apr 28 '22

great post thanks

Hosein Pouyanmehr • May 2 '22 • Edited

You're welcome, I'm glad that it was useful.

Mohammadreza Kasaiee • Jun 21 '22

حسین داداش دمت گرم خیلی پست خوبی بود. پرچمت بالاست

Hosein Pouyanmehr • Jun 21 '22

قربونت محمدرضا جان، خوشحالم که مفید بود

Birdeye • Jun 28 '22

Hi,
I'm migrating Material 4 to MUI 5 ( React + TS + NextJs ) and followed the steps
but facing the below error,

Unhandled Runtime Error
TypeError: (0 , react_WEBPACK_IMPORTED_MODULE_5_.createContext) is not a function

Call Stack
eval
node_modules\@emotion\react\dist\emotion-element-cbed451f.browser.esm.js (12:54)
./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js
.next/static/chunks/pages/app.js (73:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require_
.next/static/chunks/webpack.js (37:33)
fn
/next/static/chunks/webpack.js (288:21)
eval
webpack-internal:///./node_modules/@emotion/react/dist/emotion-react.browser.esm.js (19:98)
./node_modules/@emotion/react/dist/emotion-react.browser.esm.js
.next/static/chunks/pages/_app.js (84:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require_
.next/static/chunks/webpack.js (37:33)
fn
/next/static/chunks/webpack.js (288:21)
eval
webpack-internal:///./components/App/App.tsx (6:72)
./components/App/App.tsx
.next/static/chunks/pages/_app.js (9269:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require_
.next/static/chunks/webpack.js (37:33)
fn
/next/static/chunks/webpack.js (288:21)
eval
webpack-internal:///./pages/_app.tsx (5:76)
./pages/_app.tsx
.next/static/chunks/pages/_app.js (9280:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require_
.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
eval
node_modules\next\dist\build\webpack\loaders\next-client-pages-loader.js?absolutePagePath=private-next-pages%2F_app&page=%2F_app! (5:15)
eval
node_modules\next\dist\client\route-loader.js (235:50)

Hosein Pouyanmehr • Jun 28 '22 • Edited

Hi,
You can get this error in different situations, and most of the time reason is dependencies versions mismatch. Checking the below steps may help you.

Are the react and react-dom versions the same?
Are you using react-redux? How about its version if yes?

Providing a screenshot from your package.json or creating a sample sandbox may help fix the issue faster.

Also, it is worth checking out MUI migrating docs.

Birdeye • Jun 28 '22

Thanks for the quick response!!!

I'm sharing the list of dependencies (dev-to-uploads.s3.amazonaws.com/up...) and devDependencies ( dev-to-uploads.s3.amazonaws.com/up... ) from package.json.
I'm not using react-redux.

Hosein Pouyanmehr • Jun 28 '22

You're welcome.
Because you're migrating and not creating a new MUI project, I highly recommend you follow the steps on MUI docs if you didn't. There are fundamental changes like style engine, and the documentation covers these topics in detail.

By the way, Your dependencies and devDependencies seem ok. I haven't had this issue before, and it's hard to find the fix without looking through the code. As it may be hard to create a sandbox according to the project size, I suggest asking this question on StackOverflow or opening an issue on GitHub.

I'll try to search about it again later and let you know if I found the fix. Also, I'll be appreciated it if you share the solution in case you find it.

Birdeye • Jun 29 '22 • Edited

But the application works If add styled-components package.
and add the below line to tsconfig.json,
"paths": {
"@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
}

and,
next.config.js -> dev-to-uploads.s3.amazonaws.com/up...

Not sure why it worked If I add styled-components.

I've a folder called server which has one more tsconfig.json dev-to-uploads.s3.amazonaws.com/up... file.

And package.json => script => { "dev": "cross-env NODE_PATH=. NODE_ENV=development NODE_OPTIONS=--max-http-header-size=80000 ts-node server"}

Hosein Pouyanmehr • Jun 30 '22

Thanks for sharing this,

So, it seems that you're still using the previous MUI version (Material-UI 4), and the style engines are different in versions 5 (emotion) and 4 (styled-components). You can keep using MUI v5 with the fix you've provided in the comment. I suggest using v5 docs for implementing new features and slightly refactoring your code to make it fully compatible with the emotion engine. Also, you can use the codemods to make this process faster in particular cases.