Using Sage 9 Alpha 4, upon changes to JS, webpack rebuilds but the changes don’t take effect until after I restart the yarn session and do a hard reload. Anyone experiencing this?
Hi,
I assume you are using yarn run start? - the yarn session you mention
As the webpack server is running on localhost:3000 you should be able to see Css and Js changes being injected in your page
Have you tried a simple test like adding an alert in the main.js file? (sorry if that sounds obvious)
Are your Css changes being applied?
1 Like
Thanks for the reply @thomasmery.
You are correct, I’m using yarn start when referring to my session.
The server running on localhost:3000 updates CSS changes but not JS changes. The webpack alert in the browser shows the change happened however.
It’s very strange. There’s two ways I can get the JS changes to show.
- Stop yarn session, restart with
yarn start, then hard refresh the browser - Keep the yarn session running, and in another console window, run
yarn build, then hard refresh the browser.
Checking the console, I am getting either of the following errors (can’t quite figure out how to reproduce)
http://localhost:3000/wp-content/themes/hoang/dist/2459520c09bc1dd882f3.hot-update.json Failed to load resource: the server responded with a status of 404 (Not Found)
process-update.js:37[HMR] Cannot find update (Full reload needed)
cb @ process-update.js:37
process-update.js:38[HMR] (Probably because of restarting the server)
or
[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
logUpdates @ process-update.js:81
applyCallback @ process-update.js:49
(anonymous) @ process-update.js:57
process-update.js:89 [HMR] - ./assets/scripts/main.js
I realize this isn’t a ton to go by, please let me know if there’s any more info I can provide.
Ah, found a clue.
My WP install is located at localhost/test
Before, I had my config.js setup like so:
"publicPath": /wp-content/themes/sage",
"devUrl": "http://localhost/test",
"proxyUrl":"http://localhost:3000",
if I change publicPath to include the install name:
"publicPath": /test/wp-content/themes/sage"
my JS updates (sort of)- the changes don’t appear automatically, but they at least show up on page refresh.
I think you got your first error taken care of
do you still get the same second error?
sorry to insist but you can confirm a simple alert('I have changed') in assets/scripts/main.js does not work?
I no longer receive the errors mentioned above.
As for the alert, it does work. (albeit a no-alert warning)
To add to the strangeness however, on my front-page, the JS requires a reload to show. On any other page (single, 404, custom-template…etc), the js updates as expected.
the no-alert warning is from the linter (compile time) and won’t prevent the build
if you get the alert when simply adding it to main.js and saving (no reload) then I would say your setup works
maybe if you’d create a gist with your main.js code it would help to see things more clearly
Here you go.
apart from the fact that I don’t think you need the jQuery ready call in your common js file (this is taken care of by the the Routes init in main.js)
I would get rid of the slick-carousel stuff (to debug) and also set the statsoption of the browsersync webpack plugin to true
assets/build/webpack.plugin.browsersync.js
line 53
and see if you get some meaningful errors in the terminal
Thanks again @thomasmery. Followed your suggestions, but no dice. Also noticed same behavior on fresh install.
Looks like a issue has been opened https://github.com/roots/sage/issues/1790
yes, seems like it’s being taken care of 
I did not have the same problems though … we’ll see