윈도우 10 에서 React Native CLI 설치후 example 실행 에러

[kyujun]

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

해당 에러를 구글링 해보면 같은 이슈를 겪는 사용자들을 어렵지 않게 찾아볼 수 있는데요,
example 프로젝트의 문제라기 보다는 nodeJS 버전이 영향이 있을 수 있을 것 같습니다.

• react-native start giving Invalid regular expression invalid error facebook/react-native#26598 (comment)

사용하고 계신 nodeJS 버전이 어떻게 되시나요?
현재 LTS 버전은 14.15.1로 확인되는데 만약 그 이상 버전을 사용하고 계시다면
LTS로 downgrade후에도 해당 현상이 재현 되시는지 확인 부탁드립니다.

감사합니다.

[kyujun]

안내해주신 대로 nodeJS 버전은 다운그레이드 하였습니다.

react-native 버전도 업그레이드 해야 사용할수 있는건가요?

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

nodeJS 버전을 14.15.1로 다운그레이드 하셨음에도 동일하게 위에 보내주신 스크린 캡쳐 화면과 같이 에러가 발생하면서 안되신다는 말씀이실까요?
보고 계신 터미널 창에서 node -v 명령어를 입력하셨을때 뭐라고 나오실까요?

감사합니다.

[kyujun]

C:>node -v
v14.15.1

해당 터미널 창에는 위와같은 버전으로 나옵니다

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

저희가 현재 OS 운영체제에서는 정상 동작하는 상황이라
윈도우 운영체제에서 직접 테스트해보려고 하는데 기기가 없어서 재현이 불가능한 상황이라 정확한 안내에 다소 어려움이 있는 것 같습니다.
죄송하지만 혹시 아래 링크에 설명하신대로 설정 후 다시 테스트 해보실 수 있으실까요?

• Question: getting error on 'react-native start' facebook/react-native#26603 (comment)

해당 링크의 내용을 정리해보면 아래와 같습니다.

• iamport-react-native/example/node_modules/metro-config/src/defaults/blacklist.js 파일로 이동
• sharedBlackList 값을 아래와 같이 변경

// 현재 값
var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

// 변경 후 값
var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

시도해보시고 공유 부탁드립니다.
감사합니다.

[kyujun]

안내 해주신 대로 변경 하였을때

위 사진과 같이 나와서 안드로이드 로 빌드 했으떄 하단의 사진과 같은 에러가 나옵니다.

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

해당 example 프로젝트는 안타깝게도 react-native v0.60 미만이기 때문에
react-native run-android 명령어로는 빌드가 어렵고
매뉴얼에 안내되어 있는 대로
npm start -- --reset-cache 후 example/android/app 폴더를 안드로이드 스튜디오에서 열어서 직접 빌드하셔야 합니다.

감사합니다.

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

필요한 모듈의 링킹이 완료되어 있는 상태라면(react-native V0.60 미만은 자동 링킹이 되지 않아 수동으로 링킹 해야함)

• iamport-react-native
• react-native-webview
• react-native-gesture-handler

안드로이드X 환경을 대비해 매뉴얼에 안내되어 있는 바와 같이 아래 명령어를 실행해보시고 다시 시도해보시길 바랍니다.
저희가 윈도우 환경에서 테스트를 많이 해보지 못해 이용에 불편함을 드려 대단히 죄송합니다.

$ npm install --save-dev jetifier
$ npx jetifier

감사합니다.

[kyujun]

터미널 창에서 npm start -- --reset-cache 으로 시작후

안드로이드 스튜디오 빌드후 실행 시키면

터미널 창에는 해당 에러가

안드로이드 애뮬레이터에는

해당하는 이미지가 나옵니다

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

네 저기까지 오시면 다 되신겁니다.
저 이후부터 영역은 react-native 매뉴얼을 참고 해주시길 바랍니다.

보내주신 이미지를 보면 에뮬레이터로 띄우고 계신 것 같은데,
터미널 창에 $ adb -s <device name> reverse tcp:8081 tcp:8081를 입력하시거나
띄우고 계신 에뮬레이터 기기에서 Developer Menu > Dev Settings > Debug server host & port for device로 이동해
IP주소:8080를 입력해주시면 됩니다.

감사합니다.

[kyujun]

터미널 상 실행 에러난 모듈 npm install graceful-fs --save-dev 라인 실행후

샘플 실행 확인 완료 했습니다.

해당 1.6.0버전의 example실행 하였고

설치 프로그램 정보
chocolatey 0.10.15
jdk8 8.0.211
nodejs-lts 14.15.1
python2 2.7.18

환경설정은 https://dev-yakuza.posstree.com/ko/react-native/install-on-windows/
이곳을 참고 하였습니다.

감사합니다.