Annoying js reload


I use a quite standard Phoenix project and has recently just added a small js sort function for a table. Every now and then it works perfectly well but as soon as I start to make changes the whole thing turns into a lottery (with many loosers) where it at any given change will just stop working and then take ages to get back on line.

In essence it does this:

import { sortFunctions } from "./sort.js"

Array.from(document.getElementsByClassName("sortButton")).forEach(e => 
  e.addEventListener('click', () => 
      sortFunctions.sortTableByColumn(findSortParent(e), e.dataset.sortColumn); 
    }, false)

An example is when I was modifying the findSortParent function and added


It all stops working and says

Error: Cannot find module ‘phoenix_html’ from ‘js/app.js’

I commented the entire line. The view reloads. Nothing works, the code is not in app.js and there is no error message of any kind.
I add this (which clearly has nothing to do with it) to the method


It all works fine again.
I remove the console.warn and I get back to

Error: Cannot find module ‘phoenix_html’ from ‘js/app.js’

It has now taken me two hours to add a simple sort and it drives me nuts. I guess something is fishy with the merge/build of the app.js but I still have not been able to figure out what triggers what. The most annoying part is that there seem to be no connection between weather the js works or not.
I have not touched the brunch-config.js and have use no node modules.

Can anyone please suggest where to aim my troubleshooting.

It stops loading sometime during live reloading with that error? If so that happens sometimes when phoenix is faster than the recompiler, which is most often an issue on Windows that I’ve seen (but still sometimes happens on linux/mac).


I see.

Using Ubuntu but I guess this could be it.