Sage 9 - Changes in JS and browserSync

sage
, ,
1

Hello,
I am currently using Sage 9 beta 2.
I have some issues when I try to change my JS files.
When I run yarn run start, my js files are compiled and work but when I make a change, the page starts looping and it doesn’t stop. In my console I have the following output :

[HMR] connected
[HMR] Checking for updates on 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."
[HMR] - ./assets/scripts/routes/common.js
[HMR] Reloading page
La connexion avec http://localhost:3000/__webpack_hmr a été interrompue pendant le chargement de la page.

I’ve made some research and tried adding
if (module.hot) { module.hot.accept(); }
at the end of my main.js file.
Now it does not loop anymore, but the modifications don’t update correctly. For example, if I have this in my common.js :
$('body').on('click', () => { console.log("Click 1"); });

I see in my console “Click 1”. If then I change “Click 1” by “Click 2”, I have in my console both outputs; the first one from “main.js”, the second one from " 0.85fb8cf8b4cf5a3f7d82.hot-update.js". If I change the console.log() again, I have then three outputs (the third one from “0.4a0ae2a99735ac0fb0cd.hot-update.js”).

Even if I reload manually the page I keep getting all the outputs.

I don’t know how to fix it. Some ideas ?

Thank you a lot.

Agustina. :four_leaf_clover:

1 Like
2

I’m having the same issue! In Safari it does seem to work correctly

3

Hello.
I don’t know if you have solved your problem.

I’ve created a virtual host instead of using my localhost path (and changed the “devUrl” in config.json) and now it works well.
Hope it helps you.

Agustina

1 Like
4

Hi,

don’t you use Trellis for your local environment then? Because Vagrant will handle this for you with a VM box. My devUrl therefore already reflects my local development url and works fine without BrowserSync?

As soon as I start BrowserSync with yarn run start without any errors, it keeps reloading in Chrome:

yarn run v0.21.3
$ webpack --hide-modules --watch --config assets/build/webpack.config.js 
Webpack is watching the files…


[BS] [HTML Injector] Running...
[BS] Proxying: http://example.dev
[BS] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.1.26:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.1.26:3001
 ----------------------------------
[BS] Watching files...

Read several topics regarding this issue, but most of them are related to Gulp configuration files, not with Webpack.

Even tried a fresh Sage beta 2 clone, and even then the problem is there!
No one else is having this problem?

Cheers

6

I had this issue but was just able to resolve it. What URL are you setting your devUrl to currently?

7

like this:

  "publicPath": "/app/themes/example",
  "devUrl": "http://example.dev",
  "proxyUrl": "http://localhost:3000",
8

Okay super hard to find, but apparently the BrowserSync loop on localhost:3000 was caused by the WPML plugin’s option: Browser language redirect which was set to:

Redirect visitors based on browser language only if translations exist

I disabled it and now BrowserSync works as expected!

4 Likes
9

I have the same problem - with Chrome and Safari. BrowserSync loops on any change made to a JS file. The devUrl ist set to my virtual host.

I have no plugins installed and use Sage 9 Beta 3.

Any alternative ideas to solve the problem?

10

I’m having the same issue as well

1 Like
11

We have the same issue as @rico. Saving a JS file forces a never ending page reload loop. Running Sage 9 beta 3 release.

main.js:2120 [HMR] Checking for updates on the server...
main.js:2174 [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.
main.js:2182 [HMR]  - ./resources/assets/scripts/routes/common.js
main.js:2221 [HMR] Reloading page

But the page just keeps reloading without loading the updated JS file. We have to stop the yarn start process, clear browser cache and then start the process again. And this we have to do every time we make a change to a JS file.

Our solution:

We were able to solve this issue as it seemed to be a misconfiguration on our side. We hade the publicPath pointing to the wrong folder in our config.json. After changing to the correct folder the never ending page reload stopped, and that was the big issue here.

So make sure to have all the properties in your config.json set correctly.

8 Likes
13

@joakimstrandell thanks for posting the solution. However, imho publicPath is not the right key when it should point to the dist folder.

14

I was able to solve it thanks to @joakimstrandell , in my config file the “themes” folder was naming with “theme”. I can’t tell if is a my error on the startup phase or in the sage startup script

15

yup that was the issue thanks @joakimstrandell

16

I’m Having this same issue. Im pretty sure my config is setup correctly but still no luck. Soon as I touch the JS file I get the refresh loop.
Any help would be great.

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/PHRA-2018",
  "devUrl": "https://localhost:32850",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}
17

I am using a local development setup , serving from localhost and accessing it from there only . Installed the stable version and it is working flawlessly , and then tried the latest development version . When i tried yarn start the site kept on reloading . I tried almost everything here but the only thing that worked is to have a virtual host as you insisted . Thank you so much .