React-native: "Could not connect to developmenet server" for newly created projects since yesterday.

[charlie-rc]

Hello,

Since yesterday, i am trying to create new project and build debug apk but getting error "could not connect to development server" where my old projects are working fine.

I am using updated versions for react native, npm and nodejs.

Please help.

[faisalil]

Are you debugging in an emulator? or real device?

[mitchellhuang]

I think he's on a real device with the packager running on his computer. RN no longer binds the packager to 0.0.0.0 - instead it's only bound on localhost? Correct me if I'm wrong. I'm also experiencing this issue.

edit: i'm wrong @npomfret's solution fixed mine

[charlie-rc]

Actually i am facing the problem, both when running on emulator (android studio) and on actual device both.

[IlyasM]

I am also experiencing this issue on real device on 0.29.0-rc

[jbultmann]

Not sure if it's the same issue but a newly created project of mine fails to start the development server with an error concerning ES6 Arrow functions
Could be a missing babel compiling step for the development server or an error in the babel configuration.

/node_modules/react-native/local-cli/server/formatBanner.js:48
chalkFunction: (fn) => fn,
^
SyntaxError: Unexpected token >
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/node_modules/react-native/local-cli/server/checkNodeVersion.js:12:20)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)

Using:

• Node 6.2.2
• react-native 0.28.0

Edit:
_slamming face on keyboard_
Found the problem in my case.
Using NVM, I have installed legacy node version for old project. NVM decided to use this node version as default for new terminal sessions. As the packager started in a new terminal window it was using the old node version... So i told nvm to use the 6.2.2 as default and now I can connect.

[charlie-rc]

"So i told nvm to use the 6.2.2 as default "....please can you explain how can i try this using terminal?

[npomfret]

I've just upgraded to 0.28.0 and I'm getting Could not connect to development server red box error message when I try to view my app in the iOS simulator. There are no errors in npm, no output at al lin fact - its as if the request isn't even being made.

The same goes for a physical iOS device, however I've also tried a physical android device and it works fine on there.

I then tried a fresh _AwesomeProject_ and that works fine on the iOS simulator.

So I'm wondering if the react-native upgrade process has some how broken the Xcode project files.

[npomfret]

Solved it - i made a mistake merging Info.plist and lost this:

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

[terrysahaidak]

Any fix?

@huangbong i'm running on my device. so now what should i do?

[christopherdro]

/cc @jsierles Is this related to the recent addition of auto ip?

[xiangfengsu]

me too !!!
Could not connect to development server.

Ensure the following:

• 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://192.168.1.245:8081/index.ios.bundle?platform=ios&dev=true

[jbultmann]

@charlie-rc
"So i told nvm to use the 6.2.2 as default "....please can you explain how can i try this using terminal?
Sorry for the delay. You can use the command: nvm alias default 6.2.2 to tell nvm to load this one as default

[kaelhem]

@jbultmann
Thx! I had the same issue, and this fix it for me too.

[victoriafrench]

Ok did the upgrade, just spent the past 4 hours trying to get the emulator working. Now the emulator works, but when I try to build the native app for my phone I get the same (fn) => fn error that jbultmann got above. Using node 6.2.2. Only happens when attempting to build for the device. Anyone?

Update
Modified the output from xcode to make sure the correct node version was running. It is reporting 6.2.2. If I copy the final line in the execution sequence and paste it in the console, it bundles correctly. GRRR.

Bundle React Native code and images shell:

node -v
which node
export NODE_BINARY=node
../node_modules/react-native/packager/react-native-xcode.sh

Output:

v6.2.2
/usr/local/bin/node
+ DEST=/Users/xxx/Library/Developer/Xcode/DerivedData/TMM-hkjhhsfhnhjtohbefmvbbyycgdrz/Build/Products/Debug-iphoneos/TMM.app
+ [[ Debug = \D\e\b\u\g ]]
+ [[ iphoneos != \i\p\h\o\n\e\s\i\m\u\l\a\t\o\r ]]
+ PLISTBUDDY=/usr/libexec/PlistBuddy
+ PLIST=/Users/xxx/Library/Developer/Xcode/DerivedData/TMM-hkjhhsfhnhjtohbefmvbbyycgdrz/Build/Products/Debug-iphoneos/TMM.app/Info.plist
++ ipconfig getifaddr en0
+ IP=
+ /usr/libexec/PlistBuddy -c 'Add NSAppTransportSecurity:NSExceptionDomains:localhost:NSTemporaryExceptionAllowsInsecureHTTPLoads bool true' /Users/xxx/Library/Developer/Xcode/DerivedData/TMM-hkjhhsfhnhjtohbefmvbbyycgdrz/Build/Products/Debug-iphoneos/TMM.app/Info.plist
Add: "NSAppTransportSecurity:NSExceptionDomains:localhost:NSTemporaryExceptionAllowsInsecureHTTPLoads" Entry Already Exists
+ /usr/libexec/PlistBuddy -c 'Add NSAppTransportSecurity:NSExceptionDomains:.xip.io:NSTemporaryExceptionAllowsInsecureHTTPLoads bool true' /Users/xxx/Library/Developer/Xcode/DerivedData/TMM-hkjhhsfhnhjtohbefmvbbyycgdrz/Build/Products/Debug-iphoneos/TMM.app/Info.plist
Add: "NSAppTransportSecurity:NSExceptionDomains:.xip.io:NSTemporaryExceptionAllowsInsecureHTTPLoads" Entry Already Exists
+ echo .xip.io
+ node /Volumes/Storage/dev/xxx1/xxx2/node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js --platform ios --dev true --reset-cache true --bundle-output /Users/xxx/Library/Developer/Xcode/DerivedData/TMM-hkjhhsfhnhjtohbefmvbbyycgdrz/Build/Products/Debug-iphoneos/TMM.app/main.jsbundle --assets-dest /Users/xxx/Library/Developer/Xcode/DerivedData/TMM-hkjhhsfhnhjtohbefmvbbyycgdrz/Build/Products/Debug-iphoneos/TMM.app

/Volumes/Storage/dev/xxx1/xxx2/node_modules/react-native/local-cli/server/formatBanner.js:48
    chalkFunction: (fn) => fn,
                         ^
SyntaxError: Unexpected token >
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Volumes/Storage/dev/xxx1/xxx2/node_modules/react-native/local-cli/server/checkNodeVersion.js:12:20)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
Command /bin/sh failed with exit code 8

[victoriafrench]

moving my issue to a new bug as it is bigger than this and not related to NSAllowArbitraryLoads

[ajaxmac]

@npomfret's solution worked for me - adding this to my Info.plist solved it:
<key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> ...

[victoriafrench]

That only solves the issue with the emulator (because the connection to
localhost isn't ssl). I have this in the plist. Its compiling for a real
device that is failing

On Monday, July 11, 2016, Ajax McKerral [email protected] wrote:

@npomfret https://github.com/npomfret's solution worked for me - adding
this to my Info.plist solved it:
NSAppTransportSecurity

NSAllowsArbitraryLoads

...

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/8358#issuecomment-231650094,
or mute the thread
https://github.com/notifications/unsubscribe/AAunnWkcnKjdoI5x91QIERB17QfnHKHSks5qUd9egaJpZM4I86Kn
.

[Amerr]

@npomfret please elaborate solution on how to fix this issue. Is just confusing

[npomfret]

As of RN 0.29, if you want to deploy to a physical iOS device, you need to ensure that your apps Info.plist file contains the following:

    <key>NSAppTransportSecurity</key>
    <!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

Be warned that this is now considered a security risk (read this). You can specify a particular domain (but not an ipaddress i believe). You don't need to do this in order to deploy to the simulator because the default settings in Info.plist allow http access to localhost. And you don't need it when you push you app to production.

And your AppDelegate.m file will also need something like:

  #ifdef DEBUG
    jsCodeLocation = [NSURL URLWithString:@"http://<your-laptop-ip-address-here>:8081/index.ios.bundle?platform=ios&dev=true"];
  #else
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
  #endif

[JosephDev]

@npomfret your solution is work. For other people, I attached my Info.plist
RN 0.29.x Info.plist should like this

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

To connect local server with ip address, we need not only NSExceptionDomains, but also NSAllowsArbitraryLoads

Thanks @npomfret

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/could-not-connect-to-developmenet-server-for-newly-created-projects-since-yesterday

Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.

[ajiprasetyo]

i had same problem like you and i resolved it,
my mobile device android version 5.0.2
steps:

1. find your direktori adb (C:UsersusernameAppDataLocalAndroidsdkplatform-tools)
2. open terminal windows and run adb reverse tcp:8081 tcp:8081
   maybe can help you

[JosephDev]

@ajiprasetyo on your physical device, you can set the url on developer setting.
Here is some steps from official site

1. Make sure your laptop and your phone are on the same Wi-Fi network.
2. Open your React Native app on your device.
3. You'll see a red screen with an error. This is OK. The following steps will fix that.
4. Open the in-app Developer menu.
5. Go to Dev Settings → Debug server host for device.
6. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
7. Go back to the Developer menu and select Reload JS.

[ajiprasetyo]

@JosephDev thanks its work too, if u want run project via wi-fi :)

[rajathithan]

This can be resolved by the dev settings inside the emulator , please visit my site for more information,

http://gadoth.com/react-native-series-post-1-installation-setup/