Unable to download JS bundle on UWP React Native

Question

Environment

react-native -v: 0.47.0
npm ls rnpm-plugin-windows: 0.47.0-RC5
npm ls react-native-windows: yes
node -v:8.2.1
npm -v:5.3.0
yarn --version:n/a

Then, specify:

Target Platform: UWP (developer mode enabled)

Target Platform Version(s):
10.0.10586
.NET 4.6.1, .NET 4.5

Target Device(s):
Mobile ARM

Development Operating System:
Windows 10 Desktop

Visual Studio Version:
Visual Studio 2015
Visual Studio 2017

Steps to Reproduce

• initialize new react-native project (react-native init project_name)
• cd into project_name
• npm install rnpm-plugin-windows
• react-native windows
• open visual studio
• open .sln file in visual studio
• connect device to machine
• change deviceServerHelper,cs to point to ip address of machine
• run project in debug mode pointing to device and ARM architecture
• app launches on phone with error message
• in command prompt in project root directory run react-native start to start packager
• reload javascript error message displayed

Expected Behavior

App should load on the screen showing the contents of index.windows.js page

Actual Behavior

Error message stating unable to download JS Bundle.

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.) https://github.com/ballySingh/repo2.git

Download the zip and run npm install. Please follow step 4 from the reproduction section, above.

Answer 1

Try change localhost string to your real IP

private const string DeviceLocalhost = "localhost:8081" <--- write your IP

in file

C:\\git\\plex\\plant-floor-app\\node_modules\\react-native-windows\\ReactWindows\\ReactNative.Shared\\DevSupport\\DevServerHelper.cs

Answer 2

I had this issue when I was running the react native packager while connected to my work VPN once I disconnected my work VPN connection the packager was able to pick up the correct IP interface for my app. If you are connected to VPN, please disconnect and run your packager again.