[Windows] 초기 세팅 ‐ 빈 화면이 출력되는 문제 - study-pals/frontend GitHub Wiki

문제 상황

image

위 스크린샷과 같이 안드로이드 앱에서는 화면이 제대로 렌더링되지만, 윈도우 앱은 빈 화면을 출력하는 문제가 발생했다.

원인 발견: 패키지 종속성 불일치

[ref] https://github.com/microsoft/react-native-windows/issues/14370

"react": "18.2.0", "react-dom": "18.2.0", "react-native": "^0.77.0", "react-native-windows": "0.77.0"

After installing above dependencies with specific versions worked for me.

내 문제와 비슷한 사례를 찾았는데, 패키지의 버전을 특정 버전으로 지정했을 때 문제가 해결되었다는 내용이었다.

본래 내가 사용하던 패키지 종속성은 다음과 같았다.

"react": "^19",
"react-native": "^0.78.0",
"react-native-macos": "^0.78.0",
"react-native-windows": "^0.78.0"

패키지를 설치할 때 peer dependency mismatch warning이 출력됐었는데, 여기서 비롯된 문제였을 확률이 높아 보였다.

react-native, react-native-macos, react-native-windows 세 패키지의 package.json을 열어보았는데, 각각 다른 팀에 의해 관리되는지 같은 버전이더라도 요구하는 peerDependency 버전이 각기 달랐다.

npm을 뒤지며 세 패키지의 호환성이 모두 일치하는 버전을 찾아 적용했고, 이는 다음과 같다.

"react": "^18.2.6",
"react-native": "^0.77.0",
"react-native-macos": "^0.76.8",
"react-native-windows": "^0.77.8"

그러자 발생한 새로운 문제..

위 솔루션을 적용하자, metro 실행 시 아래와 같은 에러를 출력하며 exit하는 문제가 발생했다.

error Cannot read properties of undefined (reading 'handle').
TypeError: Cannot read properties of undefined (reading 'handle')

[ref] https://github.com/senchalabs/connect/issues/1143

I got past this by downgrading @react-native-community/cli to 16.0.2, following this thread: [react-native-community/cli#2625 (comment)](https://github.com/react-native-community/cli/issues/2625#issuecomment-2710551953)

Looks like a fix is coming in the next release.

이 또한 종속성 불일치 문제였다.. @react-native-commuity/cli를 다운그레이드하자 에러가 사라졌고, 빈 화면이 출력되는 문제 또한 해결되었다.

image