인프런 커뮤니티 질문&답변

• ❗질문 작성시 꼭 참고해주세요

  • 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.

  • 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다.

     

  • 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!

환경 : 윈도우, 안드로이드

에뮬 : Pixel 5 API 33 + Android13.0

버전 : jdk11, react-native 0.72.6, node 20, gradle 8.0.1

{
  "name": "Matzip",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-masked-view/masked-view": "^0.3.0",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "^2.13.4",
    "react-native-safe-area-context": "^4.7.4",
    "react-native-screens": "^3.27.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

react navigation 사용을 위해 라이브러리를 하나씩 추가하는 도중에 에러가 발생했습니다.

1. yarn add @react-navigation/native

2. yarn add react-native-screens react-native-safe-area-context

3. @Override
   protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(null);
   }

4. import android.os.Bundle;

5. yarn add @react-navigation/stack

6. yarn add react-native-gesture-handler

7. import 'react-native-gesture-handler';

위 단계까지 하면 아래와 같이 에러가 발생합니다.

info Reloading app...
 BUNDLE  ./index.js

error: Error: ENOENT: no such file or directory, lstat 'C:\Users\uersname\Desktop\Matzip\frontend\node_modules\prop-types\node_modules\react-is'

    at Object.realpathSync (node:fs:2707:29)

    at DependencyGraph.getSha1 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\node-haste\DependencyGraph.js:214:12)

    at Transformer._getSha1 (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\Bundler.
        js:26:26)
    at Transformer.transformFile 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Transformer.js:106:19)

    at Bundler.transformFile (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\Bundler.
        js:60:30)
        
    at async Object.transform 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\lib\transformHelpers.js:143:12)

    at async Graph._processModule 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Graph.js:257:20)

    at async Graph._traverseDependenciesForSingleFile 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Graph.js:249:5)

    at async Graph.traverseDependencies 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Graph.js:157:9)

    at async DeltaCalculator._getChangedDependencies 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:281:42)
    

시도해 본 것

1. android 폴더에서 ./gradlew clean

2. react-native doctor

3. react-native-gesture-handler 다운그레이드

4. node_modules 폴더 삭제 후 yarn install or npm install

5. 강의 소스 코드와 버전 일치하도록 package.json 수정 후 yarn install

react native 프로젝트 새로 생성 후

라이브러리 yarn 명령어로 설치하지 않고 강의 소스 package.json로 교체 후 yarn install 시 아래와 같이 오류 발생

info Opening the app on Android...
info JS server already running.

info 💡 Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor


FAILURE: Build failed with an exception.

* Where:
Build file 'C:\Users\username\Desktop\Matzip2\node_modules\react-native-gesture-handler\android\build.gradle' line: 310

* What went wrong:
Execution failed for task ':tasks'.
> Could not create task ':react-native-gesture-handler:checkIntegrityBetweenArchitectures'.
   > java.lang.reflect.UndeclaredThrowableException (no error message)

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 6s

 npm uninstall react-native-gesture-handler 해당 라이브러리 삭제 후

index.js import 'react-native-gesture-handler' 주석 처리 하면 정상적으로 빌드 되고 에뮬에서 확인 가능합니다.

어떻게 하면 react-native-gesture-handler 라이브러리를 사용할 수 있을까요?