기존의 회사 cra 프로젝트를 next.js 13으로 변경하는 작업을 진행중인데
mui를 넣으니 다양한 버그가 터졌다.
TypeError: r.createContext is not a function혹은 Hydration 문제도 있고, 아니면 mui 내부의 emotion 버그도 생겼다.
Mui에서도 변화한 Next13을 따라가기 위해 현재 토론을 진행중이다.
Plans to support Next.js 13 - /app directory emotion-js/emotion#2928
Next.js 13 compatibility (app directory/server components) mui/material-ui#34896
Next.js 13 example with /app folder mui/material-ui#34898
Improve Next.js 13 support mui/material-ui#34905
그러나 일단 2023-01-11 기준, 아래와 같이 슬픈 소식을 발견했다😥
Hello @mnajdova and @Andarist,
I come with bad news 😞
AppDir + emotion is broken.
Hydration errors happen randomly in production (never in dev mode).
After about 50+ hours of thorough investigation, my conclusion: it's a Next.js bug.
I've created a reproduction repo and opened an issue.
If you guys could confirm my conclusions that would help a lot get it noticed by Vercel.
TL;DR: If you start using MUI in an AppDir setup today you'll probably end up with random production errors that breaks the interactivity of the whole app (it's not a warning that can be ignored).
결론은 next13의 버그로 인해 에러가 일어나고 있다는 뜻.
위 깃헙 링크를 가면 한 유저가 남긴 코멘트를 보면 SSR을 포기하고 모든 것을 'use client'하며 dynamic import를 하면 mui를 사용할 수 있다고 한다.
하지만 Next 13을 사용하는 의미가 없어지니.. 나는 당분간 mui를 걷어내기로 했다.
어떻게 사용할 수 있는 방법이 없을지 며칠간 짬짬히 삽질을 했는데, 이렇게 공식 선언을 받으니 마음은 편하다😂 오픈소스에 기여하는 사람들 정말 대단함
