Vscode-react-native: [Issue] Unable to debug React Native application running on iOS simulator

[WendySanarwanto]

Synopsis

On Visual Studio Code ( version 1.0.0) installed with React Native Tools plugin (version 0.1.4), when it run & debug a React Native app ( with Debug iOS option is checked), the app run successfully on iOS Simulator but VS Code is failing debug the app. It shows several error messages in its debug panel.

Replication Steps

1. Create a React Native application by running this command in terminal window react-native init SampleAll
2. Run npm start command inside the the React Native Application's directory, in a terminal window.
3. Open the RN app in Visual Studio code.

1. Ensure that the Visual Studio has been installed with React Native Tools plugin.
   
2. On the Visual Studio Code window, click Debug panel. On the Debug panel's option, check Debug iOS option
   
3. Click the Play button. Notice the DEBUG CONSOLE panel. Confirm that the app is running on iOS Simulator successfully but the VS Code is failing on debugging the app and several error messages are shown in the DEBUG CONSOLE panel.

Actual Behaviour

1. VS Code is failing on entering debug mode.

2. Several error messages are shown in the DEBUG CONSOLE panel.

   Expected Behaviour

3. No error happen.

4. VS Code should enter debug mode.
   

   Software versions

• React-Native VS Code extension version: 0.1.4
• VSCode version: 1.0.0
• OS platform and version: Mac OS X El Capitan version 10.11.4
• React Native version: 0.24.1
• iOS Version: 9.3
• XCode version: 7.3 (7D175)
  

  Resolution

Delete everything inside ios/build ( you can use rm -rf ** inside ios/build folder inside your project). Seems prior build's artefacts could cause this issue.

[MSLaguana]

What happens if you run react-native run-ios in the project root? We try not to do anything fancy when compiling the project, so we should work if react-native CLI does.

Secondly, when using this extension we try to manage the packager (so we can configure debugging) so you should not npm start in the project. If you ensure that react-native run-ios compiles and runs the app, and that the react-native packager is not running prior to trying to debug with VS Code, then it should work out. If not, we'll check it out further.

[WendySanarwanto]

Hello @MSLaguana

"What happens if you run react-native run-ios in the project root? "
In this case, I have not stop the RN Packager ( the one I ran using npm start command on other terminal window ). I run react-native run-ios in the project on other terminal window. It shows 'Build Failed' log. Here is the screenshot:

"..If you ensure that react-native run-ios compiles and runs the app, and that the react-native packager is not running prior to trying to debug with VS Code, then it should work out. "

• I close the VS Code. I re-run npm install inside the RN Project Folder then run react-native run-ios as well. The result was I still could see 'error: PCH was compiled with module cache path' as seen in the attached screenshot. However, the weird thing is, it seems that it could build project and run the app on the ios simulator
• I stopped the react native packager server. Open the project in VS Code and redo the replication steps i mentioned earlier. The result is same error still happen. Here is the screenshot
  

Cheers.

[MSLaguana]

Your application is failing to compile, which is unrelated to our VSCode extension.

At a guess, if you got the sample app pre-built somewhere, you could try deleting ios/build which contains intermediate build objects and that may help.

[WendySanarwanto]

Hello @MSLaguana

".. you could try deleting ios/build which contains intermediate build objects and that may help."
I did your suggestion, run react-native run-ios command and the build error did not happen anymore. Awesome @MSLaguana !
Back to the main issue, I tried your suggestion to stop react packager server then tried to debug the app from VS Code. The result is the issue did not happen anymore. My VS Code has entered debugging mode successfullly. Again, Thanks for your support @MSLaguana . I will update (by adding 'Resolution' section', in case some people encountered this issue in the future) and close this issue.

Cheers

[WendySanarwanto]

The issue has been resolved by following @MSLaguana 's suggestion.

[adrianotadao]

Thank you @MSLaguana! You saved my day haahha

[khadkaPratik]

Hello @MSLaguana It ddn't worked in my case rather it gave the following error :

 The following commands produced analyzer issues:
    Analyze Base/RCTModuleMethod.mm
    Analyze Modules/RCTUIManager.m

Beside that I also have try deleting and reinstalling node_modele , podfile.lock and pods but the error is the same.

Please help me if there is any other way out .
Thank you

[ruslan-bikkinin]

Hi @khadkaPratik are you able to compile and run your React Native app via react-native run-ios?

[khadkaPratik]

@ruslan-bikkinin Hello sir,
I really don't know what is going on with my project I am just roaming around with different error . I figure out that the error is actually in my podfile which is not letting me install and pod packages .
because of which there are still some issue related to GoogleMapBase, GooglePlacePicker.

[muzammil-triffort]

Just delete all contents inside build folder. clean everything and run again.

[ruslan-bikkinin]

@khadkaPratik please clarify can you compile and run project via react-native run-ios?

[khadkaPratik]

Hello @ruslan-bikkinin Yes I am able to run react-native run-ios but then the simulator runs and stops at splash screen and @muzammil-triffort yes i have already tried to do that but it ddn't worked.
The only thing I have to do in this project is to compile all the prebuild project in ios but there are several issues after my friend add google sign in on his android project and pushed it to the repo .

[muzammil-triffort]

@khadkaPratik your issue might be related to new installed libraries only. You have to figure out that.