인프런 커뮤니티 질문&답변
작성한 질문수
stylecomponents 오류
작성
·
187
0
styled-components를 설치하고 import하면 다음과 같은 오류가 발생합니다:
runtime not ready: ReferenceError: Property 'document' doesn't exist, js engine: hermes, stack: ...
해결을 위해 시도한 것들은 다음과 같습니다:
- import 부분에 /native 잘 붙어 있는지 확인
- Metro 캐시 삭제 후 다시 실행
- styled-components 버전을 낮춰 설치 (5.3.11 등)
하지만 여전히 동일한 에러가 발생해서, 현재는 StyleSheet 방식으로 전환해서 사용하고 있습니다.
혹시 이런 상황에서 styled-components를 안정적으로 사용하는 다른 방법이 있을까요?
아니면 React Native에서는 styled-components를 피하고 StyleSheet를 사용하는 게 나은 선택일까요?
같은 경험을 하신 분이 있다면 공유해주시면 감사하겠습니다!
답변 3
0
https://github.com/styled-components/styled-components/issues/5576
styled-components 깃헙에 관련 이슈 있네요 저도 같은이슈로 삽질하다가 발견해서 댓남깁니다 총총...
0
네 여전히 오류가 뜨네요... ㅠㅠ
그 외의 오늘 시도해 본 방법들은
1. 바벨 설정 제거
babel-plugin-styled-components@2.1.4가 styled-components 설치 시 자동 포함됨babel.config.js내 플러그인 제거직접 uninstall 시도해도 계속 npm ls에 남아 있음
2. 캐시 정리 + 재설치
package-lock.json,node_modules삭제npm cache clean --forcenpm install --legacy-peer-depsnpx react-native start --reset-cache
→ 결과: 여전히 같은 document 오류 발생
3. pnpm 도입
npm install -g pnpmpnpm add styled-components그래도
babel-plugin-styled-components따라옴
4. 완전한 새 프로젝트 생성
npx @react-native-community/cli init StyledApp --template react-native-template-typescript@latest cd StyledApp pnpm add styled-components
App.tsx에 styled-components 최소 예제 작성
→ 여전히 document 오류 발생
5. 빌드만 시도
cd android .\gradlew assembleDebug
빌드는 정상적으로 성공함
SDK, build-tools 모두 설치 완료
6. 실기기에서 실행
USB 디버깅 활성화된 안드로이드 폰 연결
npx react-native run-android
→ 결과:
앱 설치 직전 컴퓨터 강제 종료됨 (하드웨어 과부하로 추정)
재부팅 후 다시 실행해도 동일하게 꺼짐
0
그렇군요.. 현재 질문주신 부분을 최대로 활용해서 계속 삽질해 보고 있는데 해결방법이 도저히 안나오는 것 같습니다.
그래도 일단 최대한으로 답변을 드리자면
import styled from 'styled-components/native';코드가 정확하게 적혀져 있는지 다시 한번 확인해 주세요.
그리고 android/app/.cxx 에서 .cxx 폴더를 확인하실 수 있으실 겁니다.
그 .cxx 폴더를 삭제해 주세요.
그리고 윈도우를 사용중이시라면
C:\Users\수강생님 사용자 이름\.gradle\caches
폴더, 즉 caches 폴더를 삭제해 주세요.
또는 맥북을 사용중이시라면
/Users/수강생님 사용자 이름/.gradle/caches
폴더, 즉 caches 폴더를 삭제해 주세요.
그리고 다시 빌드 해주시면 됩니다.
해결 안되시면 꼭 추가로 질문 주세요! 그런데 이제 해결방법이 있을련지 모르겠습니다ㅠㅠ 일단 해봐주시고 안되면 스타일시트를 사용하는 방식으로 진행하셔야 될 것 같습니다. 계속 오류 해결방법 찾아 볼게요!
오 여기에서 나온 해결책 참고하시면 좋을 것 같은데요?? 좋은 정보 공유 감사합니다 🙂