Vscode-react-native: [Bug] Fast refresh not working in typescript expo app

[Tj3n]

🐛 What is the bug? How can we reproduce it?

Please put here any steps, code or any information that can help us
reproduce the error on our side so we can fix it:

1. Create new expo typescript app with expo init my-app, select typescript tabs
2. Launch with VSCode, create launch.json file for Debug in Exponent configuration
3. Run project from VSCode, scan QR, change some code, save, nothing reflecting in Expo Go
4. Run project from terminal with expo start, fast refresh works fine

Note: Not happening for every project, tested with javascript blank template the refresh works. Unsure what's the reason. Tried changing the packager port to 19000 also not fix it.

Expected behavior

Fast refresh should works.

Debug output

Debug Console

Launching the application
Attaching to the application
Starting debugger app worker.
Established a connection with the Proxy (Packager) to the React Native application

React Native output channel

[Info] Making sure your project uses the correct dependencies for Expo. This may take a while...

Checking if this is Expo app......
[Info] Starting Packager

[Info] Packager started.

[Info] Prewarming bundle cache. This may take a while ...

[Info] Building and running application.

No issue with doctor-config-json-not-readNo issue with doctor-watchman-versionNo issue with doctor-problem-checking-watchman-versionNo issue with doctor-unversionedNo issue with doctor-versions-endpoint-failedNo issue with doctor-invalid-sdk-versionNo issue with doctor-schema-validationNo issue with doctor-validate-asset-fieldsNo issue with doctor-schema-validation-exceptionNo issue with doctor-react-native-not-installed[Info] Enable JS Debugging

[Info] Packager is already running.

Error: ENOENT: no such file or directory, scandir '/Users/vutien/Documents/MyAppFolder/MyApp/assets/images'
Error: ENOENT: no such file or directory, scandir '/Users/vutien/Documents/MyAppFolder/MyApp/assets/images'
No issue with doctor-config-json-not-readNo issue with doctor-watchman-versionNo issue with doctor-problem-checking-watchman-versionNo issue with doctor-unversionedNo issue with doctor-versions-endpoint-failedNo issue with doctor-invalid-sdk-versionNo issue with doctor-schema-validationNo issue with doctor-validate-asset-fieldsNo issue with doctor-schema-validation-exceptionNo issue with doctor-react-native-not-installed[Tue Mar 16 2021 15:47:38.608]  BUNDLE  node_modules/expo/AppEntry.js 

[Tue Mar 16 2021 15:47:59.994]  LOG      Running "main" with {"rootTag":1,"initialProps":{"exp":{"manifest":{"developer":{"projectRoot":"/Users/vutien/Documents/MyAppFolder/MyApp","tool":null},"assetBundlePatterns":["**/*"],"hostUri":"192.168.1.29:19001","xde":true,"env":{},"sdkVersion":"40.0.0","version":"1.0.0","web":{"favicon":"./assets/favicon.png"},"orientation":"portrait","bundleUrl":"http://192.168.1.29:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false","id":"@tj3n123/MyApp","iconUrl":"http://192.168.1.29:19000/assets/./assets/icon.png","name":"MyApp","platforms":["ios","android","web"],"icon":"./assets/icon.png","mainModuleName":"node_modules/expo/AppEntry","logUrl":"http://192.168.1.29:19001/logs","ios":{"supportsTablet":true},"_internal":{"packageJsonPath":"/Users/vutien/Documents/MyAppFolder/MyApp/package.json","isDebug":false,"projectRoot":"/Users/vutien/Documents/MyAppFolder/MyApp","staticConfigPath":"/Users/vutien/Documents/MyAppFolder/MyApp/app.json","dynamicConfigPath":null},"isVerified":true,"splash":{"resizeMode":"contain","backgroundColor":"#ffffff","image":"./assets/splash.png","imageUrl":"http://192.168.1.29:19000/assets/./assets/splash.png"},"updates":{"fallbackToCacheTimeout":0},"slug":"MyApp","packagerOpts":{"scheme":null,"hostType":"lan","lanType":"ip","devClient":false,"dev":true,"minify":false,"urlRandomness":"cw-hj9","https":false},"debuggerHost":"192.168.1.29:19000"},"appOwnership":"expo","initialUri":"exp://192.168.1.29:19001","shell":false}}}
Running application on CI.

Developer Tools console

PASTE OUTPUT OF DEVELOPER TOOLS CONSOLE (Help -> Toggle Developer Tools -> Select Console tab)

Environment

Please tell us about your system and your project:

• npx react-native doctor or npx expo doctor if your project is using Expo:

Didn't find any issues with the project!

• envinfo:

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
    Memory: 51.63 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.2.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
    Homebrew: 2.7.5 - /usr/local/bin/brew
    pip3: 20.3.3 - /usr/local/bin/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.24.3 - /usr/bin/git
    Clang: 1200.0.32.29 - /usr/bin/clang
  Servers:
    Apache: 2.4.41 - /usr/sbin/apachectl
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Nano: 2.0.6 - /usr/bin/nano
    Sublime Text: Build 3211
    VSCode: 1.54.3 - /usr/local/bin/code
    Vim: 8.1 - /usr/bin/vim
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 12.0.2 - /usr/bin/javac
    Perl: 5.18.4 - /usr/bin/perl
    PHP: 7.3.11 - /usr/bin/php
    Protoc: 3.14.0 - /usr/local/bin/protoc
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.9.1 - /usr/local/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby
  Databases:
    SQLite: 3.28.0 - /usr/bin/sqlite3
  Browsers:
    Brave Browser: 89.1.21.76
    Safari: 14.0.2

• React Native Tools extension version: 1.4.1
• Expo SDK version (if applicable): 4.0.0.1

[RedMickey]

Hi @Tj3n and thanks for reporting.
I tried to reproduce the issue on a fresh Expo typescript project, but fast refresh worked properly. I tested fast refresh feature on an Android emulator and device and an iOS simulator.
I only faced a problem that when the debugger is attached to an application on an Android emulator, fast refresh could work really slowly. I found out that the reason was in the difference between the time set on the emulator and the local machine. I could fix this by synchronizing the time on the emulator and the local machine (it's even better to set the time on the emulator a few seconds ahead of the computer).
Could you please check if the clock on your device is synchronized with your computer?
If after that the problem still persists, could you please add "expoHostType": "lan" property to Debug in Exponent configuration and then try to use fast refresh during debugging again?
Please let us know about your results.

[Tj3n]

Hi @RedMickey,
Thanks for the follow up, sorry for not mentioning, the issue that I was having is from Managed flow, not the Bare flow. I've not got the chance to tried the Bare workflow though, will also try that.
I'm using a real device, scan the bar code to use the Expo Go app to run the app, since it works fine using terminal expo start, I don't think it's a time issue, it only happening when I try to run from VSCode :( On futher inspection, I found out when running from terminal, the packager-info.json in .expo always have the same packagerPort and expoServerPort , while running from VSCode then they are diff, not sure if this is any issue since it works fine in blank javascript template.
If it's possible, can you try with running Managed Typescript Tab with the Expo Go app? If it works fine then maybe it's issue from my settings, but I don't see anything wrong. Thanks.

[Tj3n]

Hi @RedMickey ,
I think I found the issue, I have an extension called Jest, and Jest is also installed together with the Typescript Tab template, so when I run the project, Jest extension also start up with the app and cause fast refresh to not working (my guess is that it's conflicted with watchman), so it's not VSCode RN fault.
Think this issue in VSCode-Jest is the one that I experienced. Please feel free to close if this is something Jest should fix. Thanks!

[RedMickey]

Hi @TheAlmightyBob and @Tj3n, thanks for your investigation, this really helped us!

If it's possible, can you try with running Managed Typescript Tab with the Expo Go app? If it works fine then maybe it's issue from my settings, but I don't see anything wrong.

I'm sorry, I didn't specify that we were trying to reproduce the issue on a fresh Expo tabs (typescript) project, created via Managed workflow.

Now I have been able to reproduce the issue on an Expo project as well as plain React Native one. I found out the reason of the issue: it seems that when VSCode Jest extension is activated and watching for files changes, one system environment variable (CI: "true") is added to process.env property and causes this issue. Metro bundler also uses that env property.
I could fix this issue in the PR. Could you please try out this fix to check if it works for you?
You can install the extension with this fix by following steps:

• Download and unzip compiled extension VSIX.
• Uninstall extension
• Close VS Code
• Open VS Code
• Click Extensions -> ... -> Install from VSIX... and select downloaded VSIX

[Tj3n]

Hi @RedMickey ,
Thanks for the update, I tried to install the VSIX you provided and it works great!

[TheAlmightyBob]

Looking good here too, thanks! Though it does make me wonder why vscode-jest is setting that variable and if it should stop doing that... but I guess regardless there's not likely to be a situation where you'd want this extension to respect that mode and turn off watching.

[RedMickey]

@TheAlmightyBob, I looked through vscode-jest extension and found out that it uses jest-editor-support package, which is responsible for managing the test runner process. This package contains createProcess method, where CI: 'true' property is added to environment variables of a spawned Node.js process. According to this comment it's seems that CI: 'true' plays quite important role, otherwise the test runner process could work incorrectly.
In React Native Tools extension we don't modify process.env content, we only remove CI property from default env properties passed to the packager process while spawning. So, it shouldn't affect the jest process.

[TheAlmightyBob]

Thanks for the explanation!

[RedMickey]

The fix has been merged into the master. It will be available in a next version of the extension.