문제 상황
expo 공식 문서의 새 프로젝트를 생성하는 방법대로 npx create-expo-app@latest ProjectName을 했는데, npm install 과정에서 npm ERR가 발생하더니 npx expo start를 해도 프로젝트가 실행되지 않았다. 이 문제를 극적으로 해결한 후에도 몇가지 에러가 발생해서 쭉 정리해보고자 한다.
첫번째 문제
npm error code 1
npm error path C:\Users\f1rst\OneDrive\바탕 화면\user\example\test\node_modules\babel-plugin-react-compiler
npm error command failed
npm error command C:\windows\system32\cmd.exe /d /s /c ./scripts/link-react-compiler-runtime.sh
npm error '.'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α�, �Ǵ�
npm error ��ġ ������ �ƴմϴ�.
npm error A complete log of this run can be found in: C:\Users\f1rst\AppData\Local\npm-cache\_logs\2024-10-08T05_50_13_126Z-debug-0.log
Something went wrong installing JavaScript dependencies. Check your npm logs. Continuing to create the app.
Error: npm install exited with non-zero code: 1
나를 오늘 하루 가장 고생시킨 에러.. 이리 찾아보고 저리찾아봐도 블로그나 스택오버플로우에 비슷한 오류를 겪은 사람을 찾기 힘들었고, 그나마 비슷해 보이는 에러의 해결법을 여러번 적용해봐도 고쳐지지가 않았다.
그렇게 알 수 없는 오류와 싸우길 n시간 째.. 당연히 가장 먼저 찾아 보아야할 곳을 보지 않았다는 생각이 떠올랐는데 바로 expo의 깃허브였다. 깃허브의 이슈 탭에는 해당 오픈소스의 유저들이 각종 이슈 사항을 올려두기 때문에 비슷한 상황을 겪고 있는 사람이 이슈를 올려두었을 수도 있다. 그리고 나는.. 애꿎은 구글 검색창과 GPT만 한참 두드리다가 이곳에서 드디어 나와 같은 현상을 겪는 사람들을 발견할 수 있었다.
심지어 발견 당시에는 3시간 전에 열린 이슈로 아주 따끈따끈한 이슈였던 것..!
이슈에 달린 코멘트 중엔 일시적인 해결 방법을 공유해주신 분이 있어서 이 방법으로 해결을 시도해보았다.
package.json의 devDependencies에 "babel-plugin-react-compiler": "0.0.0-experimental-734b737-20241003" 이 한 줄을 추가해주는 것이다. 그리고 node_modules/ 폴더를 삭제 후 다시 npm install 해주면 된다.
결과는 성공적이었고, 드디어 지긋지긋한 npm install exited with non-zero code: 1 에러 문구를 보지 않아도 되었다.
두번째 문제
이제 npx expo start를 하면 정상적으로 큐알코드도 뜨니 프로젝트가 잘 세팅되....는 줄 알았으나!!
큐알코드를 인식해서 들어가보면 또 시퍼런 화면에 'Something went wrong'이라는 문구만 덩그러니 떠있었다.
vscode에서 터미널 창을 확인해보니 아래와 같은 에러메시지가 떠있었다. TypeError: Invalid character in header content ["X-React-Native-Project-Root"]
이대로 타이핑해서 구글링해봤고, 이번엔 다행히도 많은 비슷한 사례를 찾을 수 있어 아래와 같이 해결방법을 따라했다.
1. node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js에서 function statusPageMiddleware() 부분 수정
function statusPageMiddleware(_req, res) {
res.setHeader('X-React-Native-Project-Root', new URL(process.cwd())); // process.cwd()를 new URL(process.cwd())로
res.end('packager-status:running');
}2. 터미널 창에 npm cache verify 입력
위 두 작업을 완료해주었더니,
드디어 이 화면을 내 폰에서 볼 수 있게 되었다.🥹
첫번째 문제는 내 프로젝트 세팅이나 환경 상의 문제가 아니라 곧 수정이 되지 않을까 싶지만.. 앞으로 비슷한 상황이 생기면 깃허브 이슈 탭을 적극 활용해야겠다는 깨달음을 얻은 하루였다.