JSX Compilation Breaks Hot Reloading

[jeremyjh]

I followed your steps to add react to a 1.3 project, but found that hot loading was not working correctly when I modified jsx components. Saving a JSX would trigger a refresh, but nothing would change until the next refresh, so I'd always be looking at something one change behind.

I found the reason is because brunch is compiling the JSX file to priv/static e.g. I'll see in the console: assets/js/components/hello.jsx -> priv/static/js/components/hello.js

This triggers a reload; at the same time app.js is getting rebuilt but it does not get a second refresh.

As a workaround (fix) I modified my config/dev.exs so that I only watch app.js itself for reloading javascript. I'm not sure that is the best solution but its working for me right now so thought I'd leave it here for anyone else who hits the same problem.

  live_reload: [
    patterns: [
      ~r{priv/static/js/app.js},
      ~r{priv/static/.*(css|png|jpeg|jpg|gif|svg)$},
...