react-native ios "Could not connect to development server" and "__fbBatchedBridge is undefined" errors

Question

react-native ios "Could not connect to development server" and "__fbBatchedBridge is undefined" errors

I'm freshman in react-native. I tried deploy a "hello world" app according to official documents. But failed.

Here what i try:

• install all dependencies according to official site
• init my local project using command react-native init HelloWorld (At first my project name is try, but it's a reserved keyword, so I changed to HelloWorld)
• install all node_modues using npm install
• try to run my project using command react-native run-ios

my environments are:

• osx 10.10.5
• watchman 4.5
• xcode 7.2.1
• react-native-cli 1.0.0
• react-native 0.28.0
• react 15.1.0

After running command react-native run-ios, i got this red background error:

Cound not connect to development server.

Ensue the folloing:

• Node server is running and available on the same network - run 'npm start' from react-native root
• Node server URL is correctly set in AppDelegate

URL: http://localhost:8081/index.ios.bundle?platform-ios&dev=true

I searched google, and found it is a common problem mainly due to osx 9.0 security policy.

I read through the github issue: cound not connect to development server and check and modify my project:

• make sure NSAppTransportSecurity in Info.plist setting is ok.

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
  </dict>
  

• tried change jsCodeLocation in AppDelegate.m from localhost to my local network ip (In fact, i can visit the jsCodeLocation[localhost] in my chrome browser, but i changed my ip according to the github issue anyway, just try)

When i retry the command "react-native run-ios", the connect error disappeared, but come with another error "__fbBatchedBridge is undefined"

Unable to execute JS call: __fbBatchedBridge is undefined

RCTFatal + 104 ...

I read through the github issue: github->facebook/react-native/issues/6282, and try commenting out the following lines github->facebook/react-native/blob/master/packager/react-native-xcode.sh#L15-L18

#    if [[ "$PLATFORM_NAME" = "iphonesimulator" ]]; then        
#      echo "Skipping bundling for Simulator platform"      
#      exit 0;      
#    fi

But nothing happened. Anybody can help? thank you.

Answer 1

I have solved this problem.

The reason is simple and silly,

Just add localhost 127.0.0.1 in hosts and the problem will disappear.

Answer 2

The project name you've chosen try is a reserved word in javascript. This will result in problems from the beginning. For example it will generate a class name of try as follows:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class try extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

This will result in errors and unpredictability. Try to generate a new react native application using something like MyApp and give it another go.