컴파일 에러 및 의존성 충돌 문제

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

작성

수정됨

안녕하세요, 진행하다가 여러 이슈가 발생해서 한 번에 묶어 여쭤보고자 합니다!

오류가 계속 발생해서 강사님 코드도 보았는데도 잘 모르겠습니다.

Q: Hydration Mismatch 에러가 발생합니다. 서버와 클라이언트에서 렌더링되는 HTML이 다르다는데 어떻게 해결하면 될까요?

Q: Next.js 15.3.0에서 remarkGfm과 rehype 플러그인들이 호환성 문제가 발생합니다.

"Cannot read properties of undefined (reading 'inTable')" 에러

// app/blog/[slug]/page.tsx
<MDXRemote
  source={markdown}
  options={{
    mdxOptions: {
      remarkPlugins: [remarkGfm],
      rehypePlugins: [withSlugs, rehypeSanitize, rehypePrettyCode],
    },
  }}
/>

Q: next-mdx-remote에서 rehype 플러그인 사용 시 타입 에러가 발생합니다.

"Type 'Transformer<Root, Root>' is not assignable to type 'Transformer<any, any>'" 에러

// app/blog/[slug]/page.tsx (164번째 줄)
rehypePlugins: [withSlugs, rehypeSanitize, rehypePrettyCode],

Failed to compile.

./app/blog/[slug]/page.tsx:164:62
Type error: Type '(options?: Options | undefined) => void | Transformer<Root, Root>' is not assignable to type 'Pluggable<any[]>'.

  162 |                 mdxOptions: {
  163 |                   remarkPlugins: [remarkGfm],
> 164 |                   rehypePlugins: [withSlugs, rehypeSanitize, rehypePrettyCode],
      |                                                              ^
Next.js build worker exited with code: 1 and signal: null

Q: react-day-picker와 date-fns 버전 충돌이 발생합니다.

react-day-picker@8.10.1은 date-fns@^2.28.0 || ^3.0.0을 요구하는데,

현재 date-fns@4.1.0이 설치되어 있어서 충돌합니다.

// package.json
{
  "dependencies": {
    "date-fns": "^4.1.0",
    "react-day-picker": "^8.10.1"
  }
}

Error: Command "npm install" exited with 1

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error While resolving: react-day-picker@8.10.1
npm error Found: date-fns@4.1.0
npm error Could not resolve dependency:
npm error peer date-fns@"^2.28.0 || ^3.0.0" from react-day-picker@8.10.1

react 블로그 next.js cursor cursorai

답변 2

짐코딩

지식공유자

Q1. Hydration Mismatch 해결: 서버와 클라이언트에서 다른 HTML이 렌더링되어 발생하는 문제입니다.

theme 값이나 Date.now() 같은 동적 값을 사용했다면 제거하고,
useState와 useEffect로 클라이언트에서만 렌더링하도록 처리하거나 (클라이언트 컴포넌트~!)
dynamic import에서 ssr: false 옵션을 사용하세요.

Q2. remarkGfm 호환성 문제: Next.js 15.3.0과 remarkGfm 버전 충돌입니다. remarkGfm을 최신 버전으로 업데이트하거나, Next.js 버전을 15.2.x로 다운그레이드해서 해결할 수 있습니다.

Q3. rehype 플러그인 타입 에러: 타입스크립트 타입 충돌 문제입니다. rehype 관련 패키지들을 모두 최신 버전으로 업데이트하거나, 임시로 해당 라인에 // @ts-ignore 주석을 추가해서 해결하세요.

Q4. date-fns 버전 충돌: react-day-picker가 date-fns v2-3만 지원하는데 v4가 설치되어 있습니다. date-fns를 3.x 버전으로 다운그레이드하거나, react-day-picker를 최신 버전으로 업데이트해서 해결하세요.

react-day-picker 이건 사용 안하기에 제거하셔도 될 것 같습니다~!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 산독기님.

여러 문제를 한 번에 다루어 볼게요.

1. Hydration Mismatch 문제

Hydration mismatch 오류는 주로 서버와 클라이언트 사이의 렌더링 결과가 달라 발생합니다. 이를 해결하기 위해 다음을 시도해보세요:

동적 데이터 조정하기: Date.now()나 Math.random() 등 서버와 클라이언트에서 결과가 달라질 수 있는 코드를 조정하세요.
라이브러리/브라우저 확장 문제: 브라우저 확장 프로그램이 HTML을 변경할 가능성이 있으므로, 비활성화 후 다시 시도해보세요.

2. MDX 및 remark(플러그인) 관련 문제

Next.js 15.3.0 환경에서 remarkGfm과 rehype 플러그인이 호환되지 않는 문제는 해당 라이브러리의 최신 버전을 사용하더라도 발생할 수 있습니다.

버전 확인 및 업그레이드: remark 및 rehype 관련 플러그인을 최신 버전으로 업데이트해 보세요.
문서화 검토: MDXJS 공식 문제 해결 가이드를 참조하세요.

3. 타입 관련 문제

next-mdx-remote에서 rehype 플러그인을 사용 시 타입 에러가 발생하는 경우는 TypeScript와 관련된 것으로 보입니다.

타입 선언 업데이트: tsconfig.json 설정을 검토하고 적절한 타입을 사용하는지 확인하십시오.

4. `react-day-picker`와 `date-fns` 버전 충돌 문제

react-day-picker가 date-fns와 충돌하는 문제는 버전 호환성에서 비롯됩니다.

버전 맞춤 설정: package.json에서 date-fns를 ^2.28.0 또는 ^3.0.0으로 변경하여 요구된 버전으로 조정해 보세요.

"dependencies": {
  "date-fns": "^3.0.0",
  "react-day-picker": "^8.10.1"
}

이외에도 같은 문제를 겪는 유사한 해결책을 보실 수 있는 링크: MDX 관련 문제 해결

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변