Expo React-Native fails to run and debug from WebStorm

I am trying to debug an expo react-native project that uses yarn. Based on your reply to one of my prior posts, I was able to use yarn instead of npm by selecting npm with start in React Native Bundler in Edit Configuration dialog.

However, when I Run the app in WebStorm, the metro bundler starts as you can see in following screenshot but I always get an error in android emulator: https://www.screencast.com/t/o87574KeD

My Run configuration is as in following screenshot: https://www.screencast.com/t/UyNBiyI09CPg

QUESTION: Why am I getting an error even though I have specified the IP address/port that is selected in Metro Bundler for bundler host and port?

Comment actions Permalink

Did you try using as a host?

Comment actions Permalink

Yes, I tried that also as you can see in following video: https://www.screencast.com/t/RodQhuE1gi

Comment actions Permalink

I was able to run it. The problem was that "yarn start" was also running in Visual Studio Code for the same project while trying it from WebStorm. Once I shut down Visual Studio Code and ran same project from WebStorm then it ran successfully. 

However, when I Debug it in WebStorm, then I am not able to break at a line in app.js when I reload the app in emulator, however the app reloads and displays correctly. I have remote js debugging enabled on simulator.

Error when I try to debug: https://www.screencast.com/t/sovyyNlsi1W

Also, full video of my debugging session is: https://www.screencast.com/t/FOn34CdLiE

Comment actions Permalink

I was able to finally debug an expo react-native project in WebStorm. There are some important points to note when debugging expo project in WebStorm. For expo project debugging to work in WebStorm, the following steps needs to be done.

(1) Open Dev Tools in debugger's chrome instance

(2) Set one or more break points in App.js and/or custom components (this must be done in chrome dev tools instance that was opened in step  1 and  NOT in your cod editor/IDE)

(3) Click on Reload button in debugger's chrome instance

When expo app reloads in android emulator, then automatically the code will break at break points set in step (2) above. Also, at the same time in WebStorm the same break point as in chrome dev tools will be hit, and from this point  onward developer can either debug in chrome dev tools or in WebStorm.

However, if I debug a normal non-expo react-native project in WebStorm, then a break point in WebStorm will be hit without having to set break point in debugger's chrome instance dev tools i.e. no need of steps 1 and 2 for non-expo projects. It would have been good if I could skip steps 1 and 2 for debugging expo projects, but as of WebStorm 2020.2 this is not possible.


Please sign in to leave a comment.