Sage 9 - JS doesn't update on reload

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.

  1. Stop yarn session, restart with yarn start, then hard refresh the browser
  2. 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?

@thomasmery

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

@thomasmery

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 :slight_smile:

I did not have the same problems though … we’ll see