문제 정의

1. pnpm run dev를 실행 후 해당 페이지에 접속하면, 아래와 같이 Compiling 단계에서 멈춘다.

   

2. 5분 정도 기다리니 아래와 같은 에러가 뜬다. 그와 동시에, 화면은 정상적으로 뜬다.

   

   

   https://tailwindcss.com/docs/using-with-preprocessors#nesting

사실 수집

모노레포에서, 각 루트 package.json에서 관리하던 각 외부 패키지들을 각 패키지의 package.json으로 모두 옮겼다. 모두 typescript 기반이기에 tsconfig.json파일과 typescript는 각 패키지에 추가해주었다. 그리고 ui, hook같은 react가 필요한 패키지는 해당 패키지를 설치해주었다. 그 이후 이런 에러가 발생한 것이다.

원인 추론

1. 현재, 페이지에 접속 자체가 안되어서(로딩 창만 계속 뜬다) 콘솔 창에 아무것도 안뜬다. 디버깅을 할 수가 없다. 이 말은 즉, next.js 서버에서 에러가 뜨고 있다는 것을 의미한다. middleware의 문제인가? middleware파일을 제거해보자.

2. 모노레포 문제인가? 다른 앱을 실행해보자.

   docs 앱은 즉시 실행이 된다.

   

   모노레포에 문제가 있다는 것은 아니다.

3. contentLayer라이브러리가 컨텐츠를 만들던 중 발생한 문제일까?

   빌드 내용 중에 contentLayer metaData가 부적절한 글이 있다고 했는데, 그것이 원인인가?

   metaData 제대로 된 글 하나만 남겨두었는데도 안되는 것을 보니 content의 문제는 아니다.

   

4. 모듈을 설치한 이후 발생한 에러이니, 의존성 문제인 듯하다. docs에 @guesung/ui를 설치를 해서 정상 동작하는 지 체크해보자

   Spacing 컴포넌트가 잘 동작한다.

5. globalcss파일의 문제인가? import를 제거해보자

   // apps/layout.tsx
   import './globals.css';
   

   위 문을 제거하니 해결이 되었다. ✅

   그리고 또한, global.css를 import하고, 해당 파일에서 tailwind를 설정하는 아래 옵션을 제거하니 해결이 되었다.

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

확실한 것은, tailwindcss의 문제라는 것이다. 왜냐하면 tailwind 옵션을 globals.css에서 제거하니 해결이 되었기 때문이다.

해결 방안 수립

1. turbo 공식문서에서 tailwindcss를 검색한다.

tailwindcss 공식문서를 참고하라고 한다.