React-Native project (Could not connect to Development server)

Question

First!

☁  wonder  react-native --version
react-native-cli: 2.0.1
react-native: 0.58.6
☁  wonder  node --version
v13.6.0
☁  wonder  npm --version
6.13.4

When attempting to build and exe on simulator locally I'm getting;

despite there not being anything running on this port and this is the out-of-the-box port for RN projects but I will paste my AppDelagate file and tool versions..Can anyone explain how this works so that I can troubleshoot.

> react-native run-ios

Found Xcode project wonder.xcodeproj
Building using "xcodebuild -project wonder.xcodeproj -configuration Debug -scheme wonder -destination id=C9362944-1FDD-4D6E-A6BB-8E758F427 -derivedDataPath build"
User defaults from command line:

    IDEDerivedDataPathOverride = /Users/{NAME}/Documents/Projects/wonderService/wonder/ios/build


note: Using new build system

note: Planning build

note: Using build description from disk

PhaseScriptExecution Start\ Packager /Users/{NAME}/Documents/Projects/wonderService/wonder/ios/build/Build/Intermediates.noindex/React.build/Debug-iphonesimulator/React.build/Script-006B79A01A781F3800
6873D1.sh (in target 'React' from project 'React')
    cd /Users/{NAME}/Documents/Projects/wonderService/wonder/node_modules/react-native/React
    /bin/sh -c /Users/{NAME}/Documents/Projects/wonderService/wonder/ios/build/Build/Intermediates.noindex/React.build/Debug-iphonesimulator/React.build/Script-006B79A01A781F38006873D1.sh

Connection to localhost port 8081 [tcp/sunproxyadmin] succeeded!

AppDelegate.h file

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"wonder"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [UIColor blackColor];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

Above I do remember having to add

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

this can be reversed.However,I don't believe this to be the error

I also understand when customizing PORTS for projects it could be made here

node_modules/react-native/React/React.xcodeproj/project.pbxproj

but there are no signs of any other PORT being used in the instance.

lastly, I've toggled between using 127.0.0.1 && localhost... SAME RESULT

Answer 1

Update!

Have you tried the following:

rm -rf node_modules 
npm clean cache
watchman watch-del-all
npm i
npm start -- --reset-cache

You might have some npm path issues.

==================================

There are three main issues I could see that could cause this:

1. You actually are running something on 8081 without realizing it
2. Your node server isn't actually running
3. You haven't properly set up your iOS simulator to connect to the proper network

Port Issue

You can try: react-native start --port=8088. Then run react-native run-ios --port=8088 in a different Terminal window to get the iOS app running.

If it works fine, then you might actually have something running on :8081, you can double check by doing the following:

sudo lsof -i :8081

If anything comes up other than your node server, then you can kill -9 <PID> to kill any additional processes.

Note: 8081 is a popular server for anti-virus software, so you should either kill your virus software (not recommended) or specify a different port for running react native in your react-native run-ios command in your package.json

Running the node server

Check that your npm server is actually running. I'd suggest running react-native start in your project root-level directory. Then try react-native run-ios in a separate Terminal window. If it works fine, then your node server just wasn't running.

Double check your simulator network

Run yarn start in your project root, then open http://localhost:8081/debugger-ui and see if the page loads. If the page doesn't load, then your simulator is probably not connected to the correct network. You can change these settings in the simulator's settings page.

Note: there's a reason iOS is called a "simulator" vs. the Android's "emulator", the "iPhone" that XCode runs doesn't mimic the hardware & software capabilities of an iOS device, just the software, so you may run into weird issues with running React Native on iOS due to the limited capabilities of the simulator, here's a related Stack Overflow

If none of that works, does the app work fine in Android? You may have an iOS-specific issue, that at least may narrow down your search for debugging this issue.

For future reference, the React Native GitHub Issues are really helpful for finding people in the community who have come across similar problems.

Answer 2

My case was on the port 8081 being used.

I fixed it by kill the process on the port, start the server again, and run RN on iOS or Android:

sudo lsof -t -i tcp:8081 | xargs kill -9
npm start
react-native run-ios
react-native run-android

Answer 3

@Maggie

Port Issue

Nothing running;

Node Server

This had some traction to it;

• Server Terminal reads this

Error: Unable to resolve module "./index.ios" from "/Users/chris/Documents/Projects/wonderService/wonderFront/.": The module "./index.ios" could not be found from "/Users/chris/Documents/Projects/wonderService/wonderFront/.". Indeed, none of these files exist: * "/Users/chris/Documents/Projects/wonderService/wonderFront/index.ios(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)" * "/Users/chris/Documents/Projects/wonderService/wonderFront/index.ios/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/chris/Documents/Projects/wonderService/wonderFront/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)

Answer 4

I had the same issue (Could not connect to the Development server) while running the react native app on an IOS device. For me the problem was the port number, I changed the port number from 8081 to 9988 and everything worked.

1. I changed these two scripts in package.json

   "ios": "react-native run-ios --device --port=9988",

   "start": "react-native start --port=9988",

2. I added the new port number to the module.exports in the metro.config.js file.

   server: { port: 9988, }