Vscode-react-native: Unable to resolve module `../Components/AccessibilityInfo/AccessibilityInfo` message

[StasD]

I posted this bug to react-native a few days ago: https://github.com/facebook/react-native/issues/26568

Probably it should instead be posted here, because when I run react-native run-ios, there are no such messages.

Also, debugging in VSCode completely stopped working after upgrading to RN 0.61 ('unverified breakpoint')...

Software versions

• React-Native VS Code extension version: 0.11.2
• VSCode version: 1.38.1
• OS platform and version: macOS 10.14.6
• NodeJS version: 12.11.0
• React Native version: 0.61.1
• Expo SDK version (include if relevant): N/A

[SounD120]

Hi @StasD and thanks for reaching us. The issue with RN 0.61 debugging is already resolved(#1122) and the fix will be released soon. With respect to Metro bundler problems I recommend you to clear your caches and let us know if that worked for you. You can use the following instruction:

1. Clear watchman watches: watchman watch-del-all,
2. Delete node_modules: rm -rf node_modules and run yarn install,
3. Reset Metro's cache: yarn start --reset-cache,
4. Remove the cache: rm -rf /tmp/metro-*

[StasD]

Ran your commands. That didn't make any difference re: those Error: Unable to resolve module '../Components/AccessibilityInfo/AccessibilityInfo' messages... As I said, they only appear if I run "Debug iOS" from VSCode, and don't appear if I run react-native run-ios. So, most likely this extension's issue, not metro's.
Will wait for the new version to see if it fixes the debugging problems. That would be great.

[SounD120]

@StasD I just tested Debug iOS on freshly created 0.61.1 React Native application and it worked without any problems on my configuration:

System:
    OS: macOS Mojave 10.14.6
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 5.45 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.3 - /usr/local/opt/node@10/bin/node
    npm: 6.9.0 - /usr/local/opt/node@10/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.1 => 0.61.1 
  npmGlobalPackages:
    react-native-cli: 2.0.1

I noticed that there is no react-native-cli package in your react-native info output, is it installed globally? Could you please try to reinstall it globally and let us know how it works for you? You can try to use these commands:

npm uninstall -g react-native-cli
npm uninstall -g @react-native-community/cli
npm install -g react-native-cli

[StasD]

Created a brand new project: react-native init MyApp. Opened it in VS Code. Created a debug configuration React Native: Debug iOS. Edited launch.json to include "target": "iPhone 11 Pro" parameter. When I run Debug iOS for the very first time, those messages are actually not present... But on every successive run (when I close simulator, stop debugger, and run Debug iOS again), they are... Even if I delete ios/build folder before running "Debug iOS", or restart VS Code.
Yes, react-native-cli is installed globally, only with yarn, not npm.

[RedMickey]

Hi @StasD, I tried to reproduce that behavior on iPhone 11 Pro simulator and I didn't faced any problems. Could you please also try to clean haste, packager, npm and yarn caches using the following commands:

rm -rf /tmp/haste-map-react-native-packager-*
rm -rf /tmp/react-native-packager-cache-*
yarn cache clean
npm cache clean 

[StasD]

With the latest version of vscode-react-native, those messages seems to be gone. BUT so far I was only able to validate this on a newly created project. Because my existing project (obviously, more complex one) does not work with the new version at all!.. I tried deleting the ios/build folder, alone with node_modules, ios/Pods folders and ios/Pod.lock and yarn.lock files and recreating them, with no luck so far. I don't even have any particular error message from the plugin, it's just the app (its splash screen) appears, then disappears in the simulator. When I click app's icon in the simulator, it then shortly appears again, I get another message like Debugger worker loaded runtime on port 35636 in the debug window, then the app disappears again. And this only happens when I use the vscode-react-native plugin to run the app. If I run it with react-native run-ios, or in Xcode, it runs fine.

[RedMickey]

@StasD, could you please share a demo application where such a behavior is reproduced? It will help us to investigate your problem.

[SounD120]

Hi @StasD . Could you please also check if the debugging issues are the same as in #1127?

[StasD]

Here is the url: https://stas-ie.s3-eu-west-1.amazonaws.com/public/MyApp.zip
Basically I created a new project with react-native init MyApp then added a few features from the app I'm working on currently, so that the app exhibits the same behaviour: it runs fine with react-native run-ios --simulator "iPhone 11 Pro" or from Xcode, and crashes when I use "Debug iOS" from VSCode.
I added just two additional modules: react-native-navigation and react-native-splash-screen, and also modified AppDelegate.h and AppDelegate.m as per instructions from developers of those modules, e.g. here (maybe with small modifications).
I also noticed that if I comment out the code related to react-native-splash-screen, I will get an error in the simulator instead of just crashing. Like this one:

Invalid or unexpected token

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start

Looks similar to the one you referenced above, I think.

[SounD120]

Hi @StasD . I was able to reproduce that behavior. Could you please try VSIX with a fix and let us know how it works for you? To try it please do the following:

• Download and unzip compiled extension VSIX : vscode-react-native-0.12.0.vsix.zip
• Uninstall extension
• Close VS Code
• Open VS Code
• Click Extensions -> ... -> Install from VSIX... and select downloaded VSIX

[StasD]

Hi @SounD120,
All seems to working well with the new version. No more crashes. Breakpoints also work.
Thanks!

[SounD120]

Thanks, @StasD ! Glad to hear that. Are you still experiencing issue with Unable to resolve module ../Components/AccessibilityInfo/AccessibilityInfo message?

[StasD]

No, those messages also gone. You can close this issue, I suppose.