[ React 18 ] Hot reloading 문제. You are importing hydrateRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"

 

Next.js를 이용해서 프로젝트를 만들었는데 자동 새로고침이 안되는중(hot reloading 안됨 ㅜㅜ!!)

시도해본 방법

 

1. .next 파일을 지웠다가 다시 시작해본다(캐시때문이라고 생각)

2. pages 안의 파일 이름을 통일 => index.tsx 파일에서 작업중이라 의미가 없음(시도해봤지만 역시 안됨)

3. pages 파일 첫글자를 대문자로 => index.tsx 파일에서 작업중이라 의미가 없음(시도해봤지만 역시 안됨)

 

 

하지만 아직 안된다

방법 아시는분들 있으면 말씀주세요

 

 

제 생각에는 react rc버전을 사용하면서 react 18에서 지원되지 않는 hydrateRoot를 사용해서 그런 것 같습니다

 

🚨 Warning: You are importing hydrateRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"

 

이런 메세지가 콘솔에 떠서

react-dom을 import 하는 곳에 가서 react-dom/client로 바꾸려 했지만

아직까지는 react-dom을 사용하는 곳을 찾지 못했습니다

 

 

<폴더 구조>

<next.config.js>

<또다른 Error>

react 렌더링 트리에 들지 못했다고 뜨는데.. 알수가 없다

 

 

콘솔창과 터미널에서는 계속 컴파일링이 되는 것을 확인할 수 있다.

 

 

 

 

 

 

https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

https://www.cloudsavvyit.com/15975/whats-coming-in-react-18/
https://github.com/vercel/next.js/issues/16449
https://github.com/vercel/next.js/issues/30576

https://github.com/reactwg/react-18/discussions/5

https://github.com/vercel/next.js/pull/26664