Phoenix doesn't compile on save

Phoenix Forum Questions / Help
,
21

It is very odd, and I couldn’t find a way to reproduce it.
Not sure I can share the whole source code, but I can share the common parts for Phoenix apps.
Can you hint which files/info could be relevant and helpful in debugging?

24
  • What is your kernel?
  • Do you run the server in the host, or use some kind of container runtime to run it?
  • What is your filesystem, did it changed in the recent past?
  • Does other FS-monitoring tools report changes? You can try with entr for example.
25

Thanks for taking a look!
My Kernel is 5.8.16-antix.1-amd64-smp and filesystem is ext4 same for many years.
I’m running Phoenix according to docs (simple local host), no containers at all.

Can you give a pointer/example how would I use entr or other FS reporting for/with a Phoenix app?

26

If you use live view , try to check your *.html.leex , invalid html like forgot to close

</div>

can make live reload doesn’t work for that page ( I just got bitten by this)
ex: try to clear all in your home_live.html.leex and then just insert simple html to test

<h1> Hello </h1>

then try to change it to see if live reload works .

1 Like
27

Thanks, I’ll try and report back.
This could take some time though, as I have quite a few such templates to check.
I wish leex compiler would somehow catch such mismatches. :frowning:

28

some hint: try use formatter for *.html.leex , if don’t format correctly there’s probably has invalid html tags

1 Like
29

So, I failed to find any bad formatting in the .hmtl.leex files.
Even removing the <%= @inner_content %> from the root.html.leex (to test the broken HTML hypothesis) didn’t help.

Every time i save any file (.leex or .ex), the logs show only this:

assets by status 222 KiB [cached] 2 assets
Entrypoint app 222 KiB (340 KiB) = ../css/app.css 46.4 KiB app.js 175 KiB 1 auxiliary asset
cached modules 170 KiB (javascript) 46.4 KiB (css/mini-extract) 937 bytes (runtime) [cached] 11 modules
./css/app.css 50 bytes [built]
webpack 5.38.1 compiled successfully in 622 ms

i.e, a GET request doesn’t get auto-triggered, which would result in the browser reloading a page.
So, how can i find out why such GET request stopped being triggered when files are changes/recompiled?

30

can you post your root.html.leex and live.html.leex ?

31

These are just standard (not much changed, formatted with Prettier-eex plugin):

#root.html.leex
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%= csrf_meta_tag() %>
    <%= live_title_tag assigns[:page_title] %>
    <link
      rel="stylesheet"
      href="<%= Routes.static_path(@conn, "/css/app.css") %>"
    />
    <script
      defer
      type="text/javascript"
      src="<%= Routes.static_path(@conn, "/js/app.js") %>"
    ></script>
  </head>
  <%= @inner_content %>
</html>

#live.html.leex
<body>
  <div class="fixed bottom-0 z-40 w-full">
    <div class="max-w-6xl px-4 mx-auto">
      <p
        class="alert alert-info"
        role="alert"
        phx-click="lv:clear-flash"
        phx-value-key="info"
      >
        <%= live_flash(@flash, :info) %>
      </p>

      <p
        class="alert alert-danger"
        role="alert"
        phx-click="lv:clear-flash"
        phx-value-key="error"
      >
        <%= live_flash(@flash, :error) %>
      </p>
    </div>
  </div>

  <main role="main" class="pb-8 mt-20">
    <%= @inner_content %>
  </main>

  <footer class="py-6 text-red-400 bg-gray-900 md:py-10">
  </footer>
</body>
32

I can regenerate your problem by using your root.html.leex and live.html.leex , it can be fixed by moving back the

<body> ... </body>    from live.html.leex  to root.html.leex 

#root.html.leex
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%= csrf_meta_tag() %>
    <%= live_title_tag assigns[:page_title] %>
    <link
      rel="stylesheet"
      href="<%= Routes.static_path(@conn, "/css/app.css") %>"
    />
    <script
      defer
      type="text/javascript"
      src="<%= Routes.static_path(@conn, "/js/app.js") %>"
    ></script>
  </head>
<body>
  <%= @inner_content %>
</body>
</html>

#live.html.leex

  <div class="fixed bottom-0 z-40 w-full">
    <div class="max-w-6xl px-4 mx-auto">
      <p
        class="alert alert-info"
        role="alert"
        phx-click="lv:clear-flash"
        phx-value-key="info"
      >
        <%= live_flash(@flash, :info) %>
      </p>

      <p
        class="alert alert-danger"
        role="alert"
        phx-click="lv:clear-flash"
        phx-value-key="error"
      >
        <%= live_flash(@flash, :error) %>
      </p>
    </div>
  </div>

  <main role="main" class="pb-8 mt-20">
    <%= @inner_content %>
  </main>

  <footer class="py-6 text-red-400 bg-gray-900 md:py-10">
  </footer>
4 Likes
33

Oh, wow, what a wonderful catch! Thank you sooooooo much! :clap: :clap: :clap:
I believe you saved countless hours and frustration to many people in future!

I confirm that moving thee body tags back to root.html.leex solved the issue and live reloading works again. :tada:

Perhaps this makes sense for engineers very experienced with Phoenix and LiveView, yet I think this should be documented somewhere, that simply moving the body tag from root.html.leex to other file may break the live reloading feature of Phoenix.

34

You’re welcome , glad can help

1 Like