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?
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?
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)
[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:
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.
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
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