Browsersync keeps refreshing

[tibistibi]

Overview of the issue

When starting the application with yarn start and editing some files often Browsersync keeps reloading.

Reproduce the error

run yarn start or npm start
i think it gets worse after some changes.

Suggest a Fix

There seems some suggestions here:
https://stackoverflow.com/questions/37315302/gulp-browsersync-causing-multiple-reloads-with-each-filechange:
browserSync.stream({once: true})
or

    browserSync.init({
    server: dist.pages,
    files: dist.css + '*.css',
    watchOptions: {
        awaitWriteFinish : true
    }
});

But i'm unclear where i could find the browsersync configuration in jhipster. Maybe someone has some pointers. Or solved this problem already.

Browsers and Operating System

Ubuntu 18.04 Firfox and Chrome

JHipster Version(s)

stand-bystand@0.0.0 /home/tibi/git/standBystand
└── generator-jhipster@5.3.1 

JHipster configuration, a .yo-rc.json file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "nl.tibi.sbys",
      "nativeLanguage": "en"
    },
    "jhipsterVersion": "4.14.4",
    "baseName": "standBystand",
    "packageName": "nl.tibi.sbys",
    "packageFolder": "nl/tibi/sbys",
    "serverPort": "8080",
    "authenticationType": "session",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "mysql",
    "prodDatabaseType": "mysql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSocialSignIn": true,
    "enableSwaggerCodegen": false,
    "rememberMeKey": "YourJWTSecretKeyWasReplacedByThisMeaninglessTextByTheJHipsterInfoCommandForObviousSecurityReasons",
    "clientFramework": "angularX",
    "useSass": false,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": [
      "en",
      "nl",
      "de"
    ]
  }
}

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

left them out because i do not think it matters to the issue, can add them if needed.

Environment and Tools

openjdk version "1.8.0_181"
OpenJDK Runtime Environment (build 1.8.0_181-8u181-b13-0ubuntu0.18.04.1-b13)
OpenJDK 64-Bit Server VM (build 25.181-b13, mixed mode)

git version 2.17.1

node: v8.11.3

npm: 6.2.0

yeoman: 2.0.5

yarn: 1.9.4

Congratulations, JHipster execution is complete!

• [X ] Checking this box is mandatory (this is just to show you read everything)

[jdubois]

Do you mean it reloads "normally", and at some points it gets out of control? I've never experienced this, it might depend on the OS (as BrowserSync looks at the modified files to know when to reload), which OS are you using?

[tibistibi]

thanks. sometimes it reloads normally but often it keeps reloading just when it is ready, before i can do anything, it reloads again and again and again. it worked fine some weeks ago but it seems to get worse (or i lose my patience). i think it worked before i upgraded to from 4.* to 5.*

My os is ubuntu 18.04 and it happens on both firefox and chrome (chromium).

it seems to go away when i close the tab and reopen it.

[wmarques]

We use the browsersync-webpack-plugin to use browsersync and we do not have access to the browsersync configuration...
Maybe it's coming from webpack-dev-server and not browsersync

@tibistibi does this happen on a big project ? Are you stuck in an infinite loop or it just reloads "too much" ?

[eapriansyah]

I also experienced the same thing, The browser has infinite refresh. The solution is to downgrade webpack-dev-server to version 3.1.4 and browser-sync to 2.24.4

[tibistibi]

thanks for the info i see in package,json

"webpack:dev": "yarn run webpack-dev-server --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --env.stats=minimal",

so i will look into this line to find some solution.

[tibistibi]

following @eapriansyah advise i changed in package.json this:

"browser-sync": "2.24.6",
to:
"browser-sync": "2.24.4",
and

"webpack-dev-server": "3.1.5",
to
"webpack-dev-server": "3.1.4",

than run
$ yarn
and
$ yarn start

just did a quick test and it seems better now. will keep an eye.
@eapriansyah thanks a lot for the info!

strange only some of us have this problem

[pascalgrimaud]

@tibistibi @eapriansyah : it probably depends on how big your project is. That's why feedbacks like you did, are very very important for the project. Thank you very much.

As downgrading resolves the issue, I think we should do more tests and why not doing a PR.
Don't hesitate to confirm and comment if it resolves definitively your issue.

[tibistibi]

thanks!

i will test it tomorrow and will give feedback.
not sure if my project is big but i have 22 domain objects
and added 20 pages/forms (each containing view edit and confirms)

[eapriansyah]

@pascalgrimaud, For projects with entities less than 50, the configuration in version 5.3.1 is not problematic.
This happens when the entity has exceeded the number above, the problem will arise unexpectedly.
At this time the entity in the project reaches 120, after it is downgraded, the problem in browsersync is no longer happening.

[jdubois]

Thanks so much for all this, as @pascalgrimaud wrote we can't do this without all this help!!!
As soon as this is solved I'll do an emergency patch release, as I guess this affects many people.
@tibistibi do you want to do the PR so you are the author?

[deepu105]

I have seen this issue. May be it happens only in Linux, its definitely browsersync and not webpack dev server. It happens a lot especially if you are debugging. I was mostly using webpack dev server directly and forgot about this.

…

On Tue, 11 Sep 2018, 11:03 pm Julien Dubois, ***@***.***> wrote: Thanks so much for all this, as @pascalgrimaud <https://github.com/pascalgrimaud> wrote we can't do this without all this help!!! As soon as this is solved I'll do an emergency patch release, as I guess this affects many people. @tibistibi <https://github.com/tibistibi> do you want to do the PR so you are the author? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#8275 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABDlF6k9fiiS3rQiJO-Pv9_cmWaXah0bks5uaCUOgaJpZM4WjMxu> .

[tibistibi]

i can but will check tomorrow if it is resolved

it @eapriansyah wants to be owner that is offcourse fine too 😄

[amatosg]

it happens to me that it reloads serval times and I just reload it manually after a few times, haven't take the time to wait to see how many reloads it does. I'm using mac. I'll try it today and check if it loops

[tibistibi]

it seems more people have this issue than i expected.
@amatosg can you try this:

package.json this:

"browser-sync": "2.24.6",
to:
"browser-sync": "2.24.4",
and

"webpack-dev-server": "3.1.5",
to
"webpack-dev-server": "3.1.4",

than run
$ yarn
and
$ yarn start

i will changed today and make a PR.

the problem is how do we make sure it will not happen again, we can not make a test for it. probably just have to remember this issue....

(first bring kids to school ;) )

[tibistibi]

i have changed both angular and react package.json files i only use angular so react is a guess but think it is wise to keep them in sync.

[vishal423]

instead of downgrading, can you try the resolution provided on BrowserSync/browser-sync#1595 to see if that fixes your issue. If yes, then, you can update PR to add those configurations.

[tibistibi]

@vishal423 i wanted to get the problem out of the way first.
now i'm looking at if an upgrade also works.
the strange thing is that in version 3.1.5 from webpack-dev-server there seems a resolution for:
'Update sockjs-client to fix infinite reconnection loop (#1434)'

i'm now testing 3.1.8 to see if that works and will check if there is an newer browser-sync as well

[tibistibi]

@vishal423 check your link, but jhipster does not seem to have any config (or i'm not aware of it). do you know how it could be configed?

[vishal423]

can you try configuring in below block present under webpack.dev.js:

new BrowserSyncPlugin({
	host: 'localhost',
	port: 9000,
	proxy: {
		target: 'http://localhost:9060'
	}
}

[tibistibi]

@vishal423 thats already in.

the problem for me now is i can not get the reload loop back. so testing anything is unreliable.
is there anyone else who can go back and forth between not working and working?

[vishal423]

do you mean that resolution provided in that ticket doesn't fix your issue? Above block shows current configurations and you need to append below configuration to check if that fixes your issue (default timeout is 5 second):

 socket: {
    clients: {
      heartbeatTimeout: 60000
    }
  }

[tibistibi]

no i can't get the issue back so i can not test it

[tibistibi]

maybe the rerunning yarn fixed it. i hope others who have to problem to can confirm this.

[tibistibi]

and now it was back again. i had webpack-dec-server 3.1.8 and browser-sync 2.24.7

[eapriansyah]

@vishal423, the change in webpack.dev.js, resolves the infinite refresh problem in the browser-sync version 2.24.6 and above.
Below is the configuration at webpack.dev.js.
new BrowserSyncPlugin ({
             host: 'localhost',
             port: 9000,
             proxy: {
                 target: 'http: // localhost: 9060',
                 ws: true
             },
             socket: {
                 clients: {
                   heartbeatTimeout: 60000
                 }
             }
         }, {
             reload: false
         })

[pascalgrimaud]

I merged #8298 so I'm closing this ticket, as the solution to downgrade the lib works for you.

But if someone has better solution, don't hesitate to do another PR, or comment this ticket.
Thanks all for your feedback.

[vishal423]

@pascalgrimaud, I think you should revert the merge as that's not the right fix. If you follow above comments, then, I have suggested the solution, which seems to work for @eapriansyah

[pascalgrimaud]

Ok sorry, I merged so quickly.
@vishal423 : can you do another PR with the revert + your suggestion plz ?

[tibistibi]

i will test it with the unreferted version

[tibistibi]

@vishal423 i noticed when you referted angular and react have different versions of:

"webpack-dev-server": "3.1.6",
"webpack-dev-server": "3.1.5",

i think it is best to set them both to 3.1.6

[tibistibi]

or even set it to:

	"webpack-dev-server": "3.1.8",

(i have that)

[vishal423]

@tibistibi , I only reverted your commit, which means they are now set to previous tested/working versions. Upgrade of individual dependencies can be taken as separate PR

[tibistibi]

@vishal423 true

for anyone stumbling by: in the example from eapriansyah there are spaces in the url which do not work, take them away if you want to use his example.

do we need a separate issue for the different version in webpack-dev-server?

the fix seems to work on my system, maybe a minute is a bit long but it works 👍

[realcgslav]

I've stumbled upon this issue just now and have found a solution while reading it.

It's caching problem.

I've had this problem with, lets say Chromium. After switching to Firefox it went away but after a while I had it in both browser.

Simple solution is to refresh with Ctrl+F5.

[Komald]

I was facing same issue. When the project size was small it was't appearing, but as project grew, it started happening very often. @realcgslav I tried with hard refresh, browser cache clearing etc., but no luck. So it's not totally cache issue.

As suggested by @tibistibi I did downgraded the webpack-dev and browserSync and it worked. Cheers for that!

As @eapriansyah correctly said, for less entities it's not a problem, but for larger project, this indeed is the case.
Keeping any eye for any fixes coming along.

[javasparx]

instead of downgrading, can you try the resolution provided on BrowserSync/browser-sync#1595 to see if that fixes your issue. If yes, then, you can update PR to add those configurations.

This solutions helped me, thank you guys!

[anreig]

I was facing same issue. When the project size was small it was't appearing, but as project grew, it started happening very often. @realcgslav I tried with hard refresh, browser cache clearing etc., but no luck. So it's not totally cache issue.

As suggested by @tibistibi I did downgraded the webpack-dev and browserSync and it worked. Cheers for that!

As @eapriansyah correctly said, for less entities it's not a problem, but for larger project, this indeed is the case.
Keeping any eye for any fixes coming along.

Same problem here!
Anybody knows how can I disable BrowserSync to check if it's the problem?

I have
"browser-sync": "2.18.13",
"browser-sync-webpack-plugin": "1.2.0",

Thanks in advance.

[wmarques]

@anreig I think it's in the webpack config, we should have the BrowsersyncWebpackPlugin, you just have to remove it

[anreig]

Yes, I just remove it and it takes a lot time too over 9060 port now. Each time I refresh it takes more or less 2 min. Any idea to solve this? I'm on a big anguar project.
Thank you very much.

[wmarques]

We did some improvements on the build time, do you use the latest JHipster version ?
If not, you just have to generate a new app and compare the webpack configs and apply modifications