Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't fix these 2 errors when trying to run React Native ios app

Tags:

react-native

I'm having a terrible time with my React Native environment. After doing a pull from the main branch at the little startup I've been working for, I cannot get npx react-native run-ios to work. I've tried all the usual suspects like:

1. reinstall node modules from package.json
2. reinstall pod in /ios
3. reinstall cocoapods 
4. made sure to clear all caches
5. tried different versions of Node
6. reinstalled Node, NVM, Xcode, Cocoapods from the React-Native docs
7. made sure I have a .env file 
8. restarted my computer (you'd be surprised) 

The errors I get are either:

Error: EISDIR: illegal operation on a directory, read
    at Object.readSync (fs.js:498:3)
    at tryReadSync (fs.js:332:20)
    at Object.readFileSync (fs.js:369:19)
    at UnableToResolveError.buildCodeFrameMessage (/Users/demiansims/Development/ColorTV/colortv-react-native/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:304:17)
    at new UnableToResolveError (/Users/demiansims/Development/ColorTV/colortv-react-native/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:290:35)
    at ModuleResolver.resolveDependency (/Users/demiansims/Development/ColorTV/colortv-react-native/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:168:15)
    at DependencyGraph.resolveDependency (/Users/demiansims/Development/ColorTV/colortv-react-native/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:353:43)
    at /Users/demiansims/Development/ColorTV/colortv-react-native/node_modules/react-native/node_modules/metro/src/lib/transformHelpers.js:271:42

Or


Error: Unable to resolve module `./debugger-ui/debuggerWorker.aca173c4` from ``: 

None of these files exist:
  * debugger-ui/debuggerWorker.aca173c4(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx|.native.svg|.svg)
  * debugger-ui/debuggerWorker.aca173c4/index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx|.native.svg|.svg)
    at ModuleResolver.resolveDependency (/Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at /Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/lib/transformHelpers.js:267:42
    at /Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/Server.js:1096:37
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/Server.js:99:24)
    at _next (/Users/demiansims/Development/ColorTV/colortv-react-native-2/node_modules/react-native/node_modules/metro/src/Server.js:119:9)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Researching any of the errors of above have led me to the steps I took above but nothing seems to work.

I'm not using Expo for development. I'm using React-Native CLI.

like image 856
Demian Sims Avatar asked Feb 07 '21 17:02

Demian Sims


People also ask

Can React Native app run on iOS?

Once you have your React Native project initialized, you can run npx react-native run-ios inside the newly created project directory. If everything is set up correctly, you should see your new app running in the iOS Simulator shortly.

Can React Native run on both iOS and Android?

With React Native, developers can write real, natively rendering mobile applications for iOS and Android. It helps build apps on two platforms at once, while maintaining the look, feel, and productivity of an app built on the specific iOS or Android platform.

How do I check my error code in React Native?

First open Developer Tools in Simulator. Then press Command+D keyboard shortcut. It will open the developer tools. To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu.

How do I debug my react native app on my Device?

Open your React Native app on your device. You'll see a red screen with an error. This is OK. The following steps will fix that. Open the in-app Developer menu. Go to Dev Settings → Debug server host & port for device. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).

How do I run a react app on Android?

Run your app Type the following in your command prompt to install and launch your app on the device: $ npx react-native run-android Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project).

How do I run a release build in React Native?

Hint: You can also use the React Native CLI to generate and run a Release build (e.g. npx react-native run-android --variant=release ). You can also iterate quickly on a device by connecting to the development server running on your development machine.

How do I Find my device's IP address in React Native?

Open the command prompt and type ipconfig to find your machine's IP address ( more info ). Make sure your laptop and your phone are on the same Wi-Fi network. Open your React Native app on your device. You'll see a red screen with an error.


Video Answer


2 Answers

Update your node installation to latest LTS version (14.16.0 now), and it should fix this issue.

I recommend using nvm to manage your node versions. This can also help you switch versions quickly if needed.

To install the latest LTS version using nvm you can just run nvm install --lts

like image 77
Justin Avatar answered Sep 20 '22 07:09

Justin


Ok. so i ran into this same problem.

Assert that you still have index.js in your root directory. I know it sounds silly, but someone here deleted the index.js and I did not notice and I got the exact same error. after re-creating the index.js. The error was gone.

BTW just in case this is my index.js

import whyDidYouRender from "@welldone-software/why-did-you-render";
import { registerRootComponent } from "expo";
import "react-native-gesture-handler";
import React from "react";
import { enableScreens } from "react-native-screens";

import { App } from "./src/App";
import { setup } from "./src/config";

if (process.env.NODE_ENV === "development") {
  whyDidYouRender(React, {
    trackAllPureComponents: false,
  });
}

enableScreens();
setup();

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
registerRootComponent(App);
like image 43
jstuartmilne Avatar answered Sep 20 '22 07:09

jstuartmilne