Hot reload not working for library components in expo project

[petros-zavrakas]

Current Behavior

Hello everyone, i have set up a very basic Expo NX monorepo following the documentation https://nx.dev/nx-api/expo#nxexpo where I have generated a library and a component inside the library.
When I am running the app, everything seems to work as expected, except hot reload when I am updating the component inside the library.
When I am applying changes in the application components, like in apps/my-app/src/app/App.ts component, hot reload is working as expected.

Expected Behavior

The expected behaviour is that the hot reload is working when I am applying some changes/updates in the components inside libraries /libs as it does when I am applying changes/updates inside the /apps .

GitHub Repo

https://github.com/petros-zavrakas/nx-expo

Steps to Reproduce

1. Fork the repo
2. run yarn in the root folder
3. start the project default-tenant in expo nx start default-tenant
4. When metro bundler started, run the app with Expo Go in Android emulator
5. Apply some changes in the file apps/default-tenant/src/app/App.ts you will see that the application and the emulator will reload and change it will apply (hot reload is working)
6. Apply some changes in the file libs/casb-shared/src/lib/navigation/Navigation.tsx you will see the application in the emulator is not updating (hot reload is not working)

Nx Report

Node           : 23.9.0
OS             : darwin-arm64
Native Target  : aarch64-macos
yarn           : 1.22.22

nx (global)            : 20.7.0
nx                     : 20.7.0
@nx/js                 : 20.7.0
@nx/jest               : 20.7.0
@nx/eslint             : 20.7.0
@nx/workspace          : 20.7.0
@nx/cypress            : 20.7.0
@nx/devkit             : 20.7.0
@nx/eslint-plugin      : 20.7.0
@nx/expo               : 20.7.0
@nx/module-federation  : 20.7.0
@nx/react              : 20.7.0
@nx/web                : 20.7.0
@nx/webpack            : 20.7.0
typescript             : 5.7.3
---------------------------------------
Registered Plugins:
@nx/js/typescript
@nx/expo/plugin
@nx/eslint/plugin
@nx/jest/plugin
@nx/cypress/plugin
---------------------------------------
Cache Usage: 0.00 B / 46.04 GB

Failure Logs

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[petros-zavrakas]

I have managed to found what was missing. It was indeed some configuration in the tsconflict.base.json in the root folder. Defining the property paths along with the property baseUrl inside compilerOptions did the trick.

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@csb/csb-shared": ["libs/csb-shared/src"]
    }
  }
}

If I am not mistaking, this is something missing from the documentation 'https://nx.dev/nx-api/expo#nxexpo'
Maybe it should be added to avoid other people come across the same issue.

[BarbieriMatheus]

@petros-zavrakas This works like a charm. It doesn't make sense that this isn't documented, as it's a fundamental step for working properly.

I understand that the other solution would be to run the command watch-deps on my app, but this command doesn't work for me. In NX Console, I run the command watch-deps and encounter the error:

 *  Executing task: yarn nx run app-host:watch-deps 

yarn run v1.22.22
$ /Users/user/Desktop/code/super-monorepo/node_modules/.bin/nx run app-host:watch-deps

> nx run lib-secure-storage:build

> rollup -c rollup.config.cjs


/Users/user/Desktop/code/super-monorepo/packages/lib-secure-storage/src/index.ts → dist, dist...
  index.cjs.js 720 Bytes
  index.esm.js 631 Bytes
created dist, dist in 909ms

> nx run app-host:build-deps


> nx run app-host:watch-deps

> yarn nx watch --projects app-host --includeDependentProjects -- yarn nx build-deps app-host

warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
$ /Users/msuj/Desktop/crefisa/super-monorepo/node_modules/.bin/nx watch yarn nx build-deps app-host
No command specified for watch mode.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Cancelled running target watch-deps for project app-host (3s)


error Command failed with exit code 130.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

 *  The terminal process "/bin/zsh '-l', '-c', 'yarn nx run app-host:watch-deps'" terminated with exit code: 130. 
 *  Terminal will be reused by tasks, press any key to close it. 

[george-eucare]

same issue