문제상황
화면에는 문제없이 잘 띄워지는데, Error가 계속 발생했다.
배포 불가
그냥 에러문구만 나는거면 무시하려고 했지만 Vercel에 배포하려고 하니까 오류때문에 배포가 안돼서 무시할 수 없었다ㅜ
수많은 시도..
-
import를 잘못하진 않았는지 거듭 확인했지만 공식 문서에서 설명한 대로 옳게 작성했다.
-
@mui/material,@mui/system, 하다못해@mui/lab까지 전부 최신버전으로 업데이트 해봤지만 해결되지 않았다. -
인터넷을 뒤져보니
@mui/x-date-pickers-pro를 설치해보라는 조언도 있어서 따라해봤지만 역시 해결되지 않았다. -
nextjs update
<<< wow!!
mui랑은 관련 없어보이는 nextjs를 업데이트 했는데 생각지도 못한 방법으로 해결되었다!!
직접 build도 해보면서 에러를 계속 보다가
Custom webpack configuration is detected. When using a custom webpack configuration, the Webpack build worker is disabled by default. To force enable it, set the "experimental.webpackBuildWorker" option to "true". Read more: https://nextjs.org/docs/messages/webpack-build-worker-opt-out
이런 경고문구를 보게 됐다. nextjs를 최신버전으로 업데이트 하라길래 업데이트 후( "^14.0.1" -> "^14.1.3") 바로 $ npm run build --prod를 실행했더니 에러 없이 빌드가 되었다...!!!!
$ npm run dev로 로컬에서 실행했을 땐
Warning: MuiPickersFadeTransitionGroupRoot: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
이라는 경고문구가 생기긴 했지만 이제 Error는 뜨지 않는다..!
관련해서는 다시 포스팅 해야겠다.
이제 Vercel에서 잘 빌드 되는지 확인하면 된다.
결론: 문제 해결
vercel 배포 시도 결과, MUI 관련 에러는 사라졌다!
MUI 패키지에서 생긴 문제인 줄로만 알았는데, next 버전 업그레이드로 해결될 줄은 몰랐다. next 버전 업그레이드가 어떤 영향을 줘서 이런 에러가 났었던 것인지는 아직 의문이다..
