ReactNative: Metrobundler does not appear to be working.

Hello, I was developing it as an expo and needed to escape, so I escaped with the option to use the expoKit. I heard that there are two ways to run the server in this state.

If I run it the first way, it works the same way as before, but I can't load the native library properly. So I ran it in the second way, and the following error occurs. I think Bundler is not mapping properly.

The following is a log with react-native start or 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 ``:

The following is a log of 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

The following is a log with 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

The following is 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
}

Even if I search Google, react-native, expo communities, I don't know what to do, so I post a question. I would appreciate it if you could comment on any of the information I posted that lacks reasoning.

react-native

2022-09-21 11:52

1 Answers

Hello, I'll answer myself.

The problem was not podfile, info.plist or server drive commands. I chose the option to use expoKit when doing expoKit, but the biggest reason was that there was no expoKit in the project module.

First, install the library as shown below.

$ yarn add expokit react-native-unimodules

After that, I ran the bundler server with expo start and built the code with xcode, and both the mobile device and the simulator worked properly. Of course, the native library worked well. There are not many references to exject, so I hope you can see this article and help us a little.

Thank you.

2022-09-21 11:52

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656