ReactNative: metro bundler가 작동하지 않는 것 같습니다.

Question

ReactNative: metro bundler가 작동하지 않는 것 같습니다.

조회수 3157회

react-native

1

싫어요

안녕하세요, expo로 개발하다가 탈출이 필요해서 expoKit을 사용하는 옵션으로 탈출했습니다. 이 상태에서 서버 실행하는 방법이 두 가지 있다고 들었습니다.

expo start 후에 xcode에서 빌드하는 방법
react-native start 후에 다른 탭에서 react-native run-ios 혹은 react-native run-android하는 방법

첫번째 방법으로 실행해보면 예전처럼 구동되지만, native 라이브러리를 제대로 불러오질 못하더라구요. 그래서 두번째 방법으로 구동시켰는데, 아래와 같은 에러가 발생합니다. 제 생각에는 번들러가 매핑이 제대로 않는 것 같습니다.

다음은 react-native start 혹은 react-native start —reset-cache를 한 로그입니다.

$ react-native start -- --reset-cache
┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
   /Users/wookee/DEV/JOB/conplus-react-native

Loading dependency graph, done.

To reload the app press "r"
To open developer menu press "d"

info Reloading app...
info Opening developer menu...
Error: Unable to resolve module `./index` from ``:

None of these files exist:
  * index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * index/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (/Users/wookee/DEV/JOB/conplus-react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/Users/wookee/DEV/JOB/conplus-react-native/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Users/wookee/DEV/JOB/conplus-react-native/node_modules/metro/src/node-haste/DependencyGraph.js:282:16)
    at /Users/wookee/DEV/JOB/conplus-react-native/node_modules/metro/src/lib/transformHelpers.js:267:42
    at Server.<anonymous> (/Users/wookee/DEV/JOB/conplus-react-native/node_modules/metro/src/Server.js:1088:41)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/wookee/DEV/JOB/conplus-react-native/node_modules/metro/src/Server.js:99:24)
    at _next (/Users/wookee/DEV/JOB/conplus-react-native/node_modules/metro/src/Server.js:119:9)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
Error: Unable to resolve module `./index` from ``:

다음은 react-native run-ios를 한 로그입니다.

 react-native run-ios
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
  - @react-native-community/datetimepicker (to unlink run: "react-native unlink @react-native-community/datetimepicker")
  - react-native-gesture-handler (to unlink run: "react-native unlink react-native-gesture-handler")
  - react-native-reanimated (to unlink run: "react-native unlink react-native-reanimated")
  - react-native-screens (to unlink run: "react-native unlink react-native-screens")
  - react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
error Could not find the following native modules: RNDateTimePicker, RNGestureHandler, RNReanimated, RNScreens, RNSVG. Did you forget to run "pod install" ?
info Found Xcode workspace "conplus.xcworkspace"
info Building (using "xcodebuild -workspace conplus.xcworkspace -configuration Debug -scheme conplus -destination id=64FD6F9F-6219-4E1B-B544-10D2336715EB")
..............................
info Installing "/Users/wookee/Library/Developer/Xcode/DerivedData/conplus-dbzfqspmrgwmjehknyymgrazyahg/Build/Products/Debug-iphonesimulator/conplus.app"
info Launching "com.conlabon.conplus"
success Successfully launched the app on the simulator

다음은 react-native info를 한 로그입니다.

react-native info
info Fetching system and libraries information...
System:
    OS: macOS 10.15.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 187.91 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz => 0.61.4

다음은 package.json입니다.

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "EXPO_DEBUG=true expo eject",
    "lint": "npx eslint .",
    "lint-fix": "npx eslint . --fix",
    "svg": "npx @svgr/cli -d assets/svgjs assets/svg --native",
    "precommit-msg": "echo 'Pre-commits'",
    "build:android": "expo build:android -t app-bundle",
    "build:ios": "expo build:ios"
  },
  "pre-commit": [
    "precommit-msg",
    "lint"
  ],
  "dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "@babel/runtime": "^7.8.7",
    "@dudigital/react-native-zoomable-view": "^1.0.15",
    "@react-native-community/datetimepicker": "2.1.0",
    "apollo-boost": "^0.4.7",
    "apollo-link-context": "^1.0.19",
    "delay": "^4.3.0",
    "expo": "^36.0.0",
    "expo-av": "~8.0.0",
    "expo-blur": "^8.0.0",
    "expo-camera": "~8.0.0",
    "expo-constants": "^8.0.0",
    "expo-file-system": "~8.0.0",
    "expo-image-picker": "~8.0.1",
    "expo-linear-gradient": "~8.0.0",
    "expo-media-library": "~8.0.0",
    "expo-permissions": "^8.0.0",
    "graphql": "^14.6.0",
    "graphql-tag": "^2.10.3",
    "immer": "^3.2.0",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
    "react-native-dash": "0.0.11",
    "react-native-element": "^1.2.1",
    "react-native-elements": "^1.2.7",
    "react-native-expo-image-cache": "^4.1.0",
    "react-native-expo-viewport-units": "^0.0.8",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-keyboard-accessory": "^0.1.10",
    "react-native-modal-datetime-picker": "^8.1.1",
    "react-native-modal-selector": "^1.1.2",
    "react-native-paper": "^2.16.0",
    "react-native-picker-module": "^1.2.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-svg": "9.13.3",
    "react-native-unimodules": "^0.7.0",
    "react-native-web": "^0.11.7",
    "react-navigation": "^4.0.0",
    "react-navigation-animated-switch": "^0.3.1",
    "react-navigation-hooks": "^1.0.3",
    "react-navigation-material-bottom-tabs": "^2.1.1",
    "react-navigation-stack": "^1.5.3",
    "react-navigation-tabs": "^2.5.1",
    "react-number-format": "^4.3.1",
    "react-redux": "^7.1.1",
    "redux": "^4.0.4",
    "redux-actions": "^2.6.5",
    "redux-persist": "^6.0.0",
    "redux-promise": "^0.6.0",
    "redux-saga": "^1.0.5",
    "reselect": "^4.0.0",
    "shortid": "^2.2.15",
    "string-format": "^2.0.0",
    "styled-components": "^4.3.2"
  },
  "devDependencies": {
    "@svgr/cli": "^4.3.2",
    "babel-eslint": "^10.0.3",
    "babel-plugin-module-resolver": "^3.2.0",
    "babel-preset-expo": "^8.0.0",
    "eslint": "^6.4.0",
    "eslint-cli": "^1.1.1",
    "eslint-config-airbnb": "18.0.1",
    "eslint-import-resolver-babel-module": "^5.1.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^1.7.0",
    "pre-commit": "^1.2.2"
  },
  "private": true
}

google을 뒤져봐도, react-native, expo 커뮤니티를 뒤져봐도 어떻게 해야할지 알 수가 없어 질문글 올립니다. 제가 올린 정보 중에 추론하기 부족한 부분이 있으면 댓글 달아주심 감사하겠습니다.

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 0 · Accepted Answer

안녕하세요, 자답하겠습니다.

문제는 Podfile, info.plist나 서버 구동 명령어가 아니었습니다. expo eject할 때 expoKit을 사용하는 옵션을 선택했는데, 프로젝트 모듈에 expoKit이 없었던게 가장 큰 이유였습니다.

우선 아래와 같이 라이브러리를 설치합니다.

$ yarn add expokit react-native-unimodules

그 다음 expo start로 번들러 서버를 구동시킨 후에 xcode로 코드를 빌드해주니 모바일 디바이스, 시뮬레이터 둘 다 제대로 구동되었습니다. 물론 native 라이브러리도 잘 돌아갔구요. expo eject에 대한 레퍼런스가 많이 없는데 조금이나마 이 글 보시고 조금이나마 도움이 되셨으면 좋겠습니다.

감사합니다.