When implementing node into my existing node app, I ran into an issue where jsx compilation reloads were hanging in the browser.
This was specific to jsx only. I had a separate sass built that was reloading just fine.
What I found was that there was a clash between my nodemon server reload and the browserSync reload.
The problem was that both browserSync and nodemon where watching my javascript files. When the jsx compiled it triggered a reload by both of these tools. That in turn seemed to confuse them, and they continued to try to re-reload, resulting in an infinite spinner in the browser tab along with the following output in the terminal:
Utilizing copilot to troubleshoot, I was able to apply modify my package.json build script to the following to resolve, which scopes the nodemon watch to _only_ the controllers, models, and routes folders that I need it to watch, since those are server-side files.
Doing so allowed BrowserSync to continue to handle the reloads of jsx updates, where no server restart is needed and a browser reload suffices:
"watch": "gulp allTheThings & nodemon --watch controllers --watch models --watch routes --ignore public/js/dist bedtime-checklist.js",gulp allTheThings– gulp watch on the jsx and js files
nodemon --watch controllers --watch models --watch routes – scopes nodemon server watch and reloads to only the controllers, models, and routes directory
--ignore public/js/dist bedtime-checklist.js – ignore updates to the app entry point. This is something that AI added and as I write this I’m realizing it may be beneficial to keep that in scope, as app entry point updates may require a server restart. That’s a todo item for me.
After updating, the new terminal output after a jsx update is the following:
Leave a Reply