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

📑 오류기록

Po_tta_tt0 2022. 3. 29. 14:18

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 렌더링 트리에 들지 못했다고 뜨는데.. 알수가 없다

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