@nx/next:serve with a custom-server results in file watcher detects file changes continuously

joshuawwright commented 7 months ago

Current Behavior

When serving a Next.js application using a custom server, the file watcher detects file changes continuosly even though none are being made.

Expected Behavior

When serving a next app using a custom server, the file watcher should only trigger the server to reload when files are actually added, remove, or updated.

GitHub Repo

https://github.com/joshuawwright/test123

Steps to Reproduce

Create App using: npx create-nx-workspace@17.3.2
- Where would you like to create your workspace? test123
- Which stack do you want to use? react
- Which framework would you like to use? Next.js
- Integrated monorepo, or stanalone project? integrated
- Application name frontend
- Would you like to use the App Router (recommended)? Yes
- Would you like to use the src/ directory? Yes
- Test runner to use for end to end (E2E) tests none
- Default stylesheet format css
- Set up CI with caching, distribution and test deflaking Skip for now
- Would you like remote caching to make your build faster? Skip for now
Created custom server: nx g custom-server
- Select frontend
Serve app: nx serve frontend

I then get the following output: `10:35:59 AM - File change detected. Starting incremental compilation...

10:35:59 AM - Found 0 errors. Watching for file changes. Debugger listening on ws://localhost:9229/fc947656-2738-4f33-b353-1dcc5283da94 For help, see: https://nodejs.org/en/docs/inspector

[ ready ] on http://localhost:4200 `

Note that a "File change is detected", even though I am not modifying any files. It just keeps repeating this content continuosly with new timestamps, even though I am making no changes.

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 20.11.0
   OS     : linux-x64
   npm    : 10.2.4

   nx                 : 17.3.2
   @nx/js             : 17.3.2
   @nx/jest           : 17.3.2
   @nx/linter         : 17.3.2
   @nx/eslint         : 17.3.2
   @nx/workspace      : 17.3.2
   @nx/cypress        : 17.3.2
   @nx/devkit         : 17.3.2
   @nx/eslint-plugin  : 17.3.2
   @nx/next           : 17.3.2
   @nx/react          : 17.3.2
   @nrwl/tao          : 17.3.2
   @nx/web            : 17.3.2
   typescript         : 5.3.3

Failure Logs

No response

Package Manager Version

10.2.4

Operating System

[ ] macOS
[X] Linux
[ ] Windows
[ ] Other (Please specify)

Additional Information

No response

aholthagerty commented 6 months ago

I am having this issue currently and it is beyond frustrating.

System setup: Windows 10, running in WSL 2.0 Ubuntu.

Have also tried running within the node:20-alpine Docker image and still get the same result. Infinite rebuilds.

I'm assuming there is a file somewhere triggering a rebuild, but setting watch: false on the nx task for serve-custom-server doesn't seem to do anything.

ndcunningham commented 6 months ago

I could reproduce this issue as a workaround you could

build your nextjs app (npx nx build my-app) you can add --skip-nx-cache if necessary.
Serve your app using the custom-server command (npx nx serve-custom-server my-app).

This is effectively the same thing as running just the serve command for production. cc: @aholthagerty this should address your issue as well.

aholthagerty commented 6 months ago

This is effectively the same thing as running just the serve command for production. cc: @aholthagerty this should address your issue as well.

I ran into this while attempting to serve the app in a development environment with hot reload. My workaround for now was to just remove all custom-server tasks and code from my app as it was not necessarily needed at the moment. I don't think this workaround sufficiently addresses the issue, as the actual issue lies with the hot-reload file change detection in the @nx/js:node executor used by the custom-server.

joshuawwright commented 6 months ago

@ndcunningham I just saw you added the label os:windows, my os is Ubuntu. Based on @aholthagerty messages above, this is likely a cross platform issue.

The reason I am using the custom server, is that I need to run nx with https in development, so that I can access APIs such as the BluetoothApi in chrome.

ndcunningham commented 6 months ago

Okay the problem seems to be related to typescript.

Here is what you can do:

Use swc instead tsc
If this is a new app when you generate a custom-server it will have Nx's Crystal enabled which should work with tsc.

Both of these require you to update your Nx version to the latest as you need the update from https://github.com/nrwl/nx/pull/21736

github-actions[bot] commented 2 weeks ago

This issue has been automatically marked as stale because it hasn't had any activity for 6 months. Many things may have changed within this time. The issue may have already been fixed or it may not be relevant anymore. If at this point, this is still an issue, please respond with updated information. It will be closed in 21 days if no further activity occurs. Thanks for being a part of the Nx community! 🙏

nrwl / nx