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

[joshuawwright]

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

1. Create App using: npx [email protected]

• 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

2. Created custom server: nx g custom-server

• Select frontend

3. 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]

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]

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]

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]

@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]

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]]

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! 🙏

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.