Constant reload on phx.server watch files

Hi,

I’ve been having this constant issue with multiple phoenix projects. My assets and page are constantly reloading around every 20 seconds. Is not one project but multiple. I don’t know if this is Phoenix related, Liveview related, OS related or being caused by some other app or tool.

if I install a new phoenix from fresh with

mix phx.new foo --live

and run… mix phx.server all I see is:

❯ mix phx.server
[info] Running FooWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[info] Access FooWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...

[watch] build started (change: "../../..")
[watch] build finished
[watch] build started (change: "../../..")
[watch] build finished
[watch] build started (change: "../../..")
[watch] build finished
[watch] build started (change: "../../..")
[watch] build finished

never ending… without doing touching the app, without opening it in the browser, without code open in an IDE or text editor… simply by running the command and looking at the console.

This issue gets worst has I add stuff to the assets or css. And in the browser is constant page reloads that dont allow me to do anything.

My question is simple… is there any way to see what triggered the reload? or rebuild?

I’m running:

❯ elixir -v
Erlang/OTP 24 [erts-12.1.2] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit] [dtrace]

Elixir 1.12.3 (compiled with Erlang/OTP 24) 
❯ mix phx -v
Phoenix v1.6.2 

on macOS big sur 11.6

I dont know what else other feedback to give.

The only thing I did that is not mention before… I added a postgres docker image. and configured with db credentials.

Did you add some imports to your app.js which are outside of your project folder?
Like import "../../../../app.css";

Not sure how the esbuild watcher works, but if you add something like that, a rebuild is triggered everytime something changes in the folder (e.g. opening of a file).

Okay, it looks like esbuild watches the whole directory the imported file is in and reloads when anything changes in there (e.g. new file, changed file, new directory, …).

Like I said is a new empty liveview project with the initial template… and a docker-compose.yml and a .env. nothing else

Okay. I could reproduce that. It is an esbuild bug (which was fixed 0.13.5).

Try bumping the esbuild version in config.exs.

config :esbuild,
  version: "0.13.9",
  ....

and then run mix esbuild.install

That should fix the issue.

4 Likes

Looks like that fixed.

Dont understand why this is still on the base template for Phoenix Framework.

But thanks a lot. been having this problem for many weeks.

No problem.
I just opened an issue to bump the default version to >= 0.13.5 in phoenix.

1 Like

Holy crap thank you @moogle19—this was driving me absolutely nuts yesterday. Slightly different problem but just as annoying. This totally fixes it.