[Windows] 초기 세팅 ‐ 빈 화면이 출력되는 문제 - study-pals/frontend GitHub Wiki
문제 상황
위 스크린샷과 같이 안드로이드 앱에서는 화면이 제대로 렌더링되지만, 윈도우 앱은 빈 화면을 출력하는 문제가 발생했다.
원인 발견: 패키지 종속성 불일치
[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
를 다운그레이드하자 에러가 사라졌고, 빈 화면이 출력되는 문제 또한 해결되었다.