Elm-watch not injecting itself

Learn
1

Hi,

I’ve been using elm-watch and it’s great, but I’m getting intermittent problems where it doesn’t seem to be injecting itself into the page and therefore I’m not seeing the changes to my Elm files.

It does detect changes to my Elm files, it does re-compile and according to the elm-watch output after I change a file, everything is fine - I’m just not seeing the newly compiled files.

Restarting elm-watch has no effect, so I was wondering if anyone has seen this before, and if so is there a fix? I’m stumped, and not sure how to troubleshoot, so any help would be great as I don’t want to have to stop using elm-watch.

Thanks

2

If you see some variation of this in the (by default) bottom-left corner, then elm-watch has “injected itself” (if that’s what you mean).

image

If it’s not there, it has not (= you are not running any elm-watch JS on the page, or there’s an error in the JS console that prevented elm-watch from showing up).

I’m happy to help more, but right now all details are too vague to be able to say anything. Other than that I use elm-watch daily and have no problems at all :blush:

For example, what does this mean?

I’m just not seeing the newly compiled files.

3

Hi Simon,

Thanks for the reply, and I know the info I provided was vague, sorry - wasn’t really sure how to explain with the small amount of info I have at my disposal.

Correct, it’s not there, and there is no error in the console, no output at all.

I make a change to an Elm file, elm-watch detects the change, and then outputs its ‘success’ output in the console, but because elm-watch isn’t running any JS on the page, I don’t see the change I made to the Elm file in the browser.

One of the problems I have is that I can’t reproduce the situation because I don’t know the cause.

It’s back up and running fine now, and I haven’t done anything other than restart elm-watch and my local server (elixir phoenix) (multiple times) - so I’m ok for the mo, but I don’t know for how long.

I know I’m not really helping with the little info I can provide, and was really wondering if there was something I could do on the elm-watch side to troubleshoot in order to detect it’s state etc (if that’s even possible or useful :man_shrugging:)

Next time it happens I’ll try and document what I did leading up to the issue, and everything I do leading up to it resolving itself.

Thanks again and sorry for the vagueness this time around.

4

You’re not running elm-watch < 1.0.0-beta13 by any chance? Before that version, writing the output files was not atomic, so it was possible to occasionally end up with compiled Elm JS without any elm-watch client code in it.

That reminds me – when it happens next time, look at the compiled JS file. It is supposed to start with something like:

// elm-watch hot {"version":"1.1.2","targetName":Your target name","webSocketPort":60361}
"use strict";
(() => {
  // node_modules/tiny-decoders/index.mjs
  function boolean(value) {

At the top of the file there’s an “IIFE” (() => { /* ... */ })() with the elm-watch client code, followed by the regular Elm output.

Let me see if I understand what seems to happen to you.

  1. You start elm-watch for the first time of the day.
  2. You open your page in the browser. You see the elm-watch UI in the bottom-left corner.
  3. You make changes in your editor. elm-watch hot reloads in the browser as expected.
  4. Suddenly the elm-watch UI is gone in the browser. Refreshing the page or restarting elm-watch does not help.

Notes:

  • You said “Restarting elm-watch has no effect” but also that it’s an intermittent problem. So how do you fix the problem? It sounds like it has happened multiple times and that your elm-watch setup isn’t “bricked” right now?
  • The elm-watch UI code is run on the first page load. When hot reloading, only the Elm JS is sent over the websocket. Not any new elm-watch UI code. I wonder how the elm-watch UI goes missing?
    • There is code to remove the UI here: elm-watch/client.ts at 9d98d0e0224ee24eb6d55404898cbe45f5ba1e51 · lydell/elm-watch · GitHub. However, that’s inside the window.__ELM_WATCH.KILL_MATCHING function which is only ever called in tests. Theoretically though, you can call that function yourself.
    • Maybe some script on your page removes the elm-watch UI? But then it must somehow also close the web socket connection? Btw, next time you could check in the terminal how many web socket connections you have (it looks something like this: web socket connections: 1 (ws://0.0.0.0:60361)). And you can try the Network tab in the browser dev tools and see if you see the web socket connection there as well.
    • Most likely, elm-watch reloads the page at some point. It does that when hot reloading isn’t possible. Or some other tool you use cause a page reload. And at that point, your output JS file somehow contains compiled Elm code but not the elm-watch UI code. Where does that come from? Is there some rare bug in elm-watch causing it? Or do you have some other tool writing to that file as well? Could there be some caching going on?

You can also enable “Persist logs” in the browser console. Next time it happens, you might be able to scroll up in the browser console logs and see if a page reload happened, and maybe why.

Finally, you can set the __ELM_WATCH_DEBUG environment variable to anything to get some – very verbose – debug logs, both in the terminal and in the browser console. elm-watch uses The Elm Architecture internally, and logs all messages and model updates.

1 Like
5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.