Browsersync page refresh loop

no… removing dependencies, later removing whole node_modules and yarn - doesn’t help

also: here is output Screenshot by Lightshot

Am having the same issue as well. Is there a fix?

@kotmatpockuh First, make sure there is no other processes running on port 3000 with sudo fkill :3000 then run yarn start again. If it keeps refreshing, open chrome developers tools and right click on the browser site reload button then click empty cache with force refresh. Should be good.

2 Likes

The same happening to me sometimes. I just stop and rerun yarn start and it’s ok again.

Similar as when a new image is added to /images folder, everything goes to hell, then rerunning yarn does the job.

I having the same issue as well. Stopping and restarting clears out the issue, but would be great to find a solution to make the watch script work as expected.

I get exactly the same problem, using windows 10 with lando.

I just get endless browser reloads! No idea why.

My BrowserSync config is:

    {
      "entry": {
        "main": [
          "./scripts/main.js",
          "./styles/main.scss"
        ],
        "customizer": [
          "./scripts/customizer.js"
        ]
      },
      "publicPath": "/app/themes/sage",
      "devUrl": "http://bedrock.test",
      "proxyUrl": "http://localhost:3000",
      "cacheBusting": "[name]_[hash:8]",
      "watch": [
        "app/**/*.php",
        "config/**/*.php",
        "resources/views/**/*.php"
      ],
      "watchOptions": {
        "aggregateTimeout": 300,
        "poll": true
      }
    }

I’ve got a Lando setup on windows and I proxy port 3000 into my tooling container running BrowserSync.

My project runs on the following layout

/web/app/themes/sage

And My hosts file points bedrock.test at the localhost.

I got the endless reload loop! Please somebody help! I’ve added debug lines to the BS config and its output just repeatedly says:

[Browsersync] Browser Connected: Chrome, version: 74.0.3729.169
[BS] [HTML Injector] Stashing:

I’m totally stuck with this!

I would advise against using Lando or Docker for serious development with Sage. Docker isn’t great in development because it’s so slow at syncing files with the host (sometimes it completely stalls out). There are methods of keeping the node_modules (and the generated assets) on the container, but I don’t have any good examples on hand for that. Hopefully in the future we can update the Lando guide + provide solutions for using Sage in Docker environments.

Suddenly running into the same issue. Except yarn start works perfectly, and keeps working fine as we make scss changes. But if we make any scss changes and kill yarn then rerun yarn start it loads infinitely. We can’t delete or add any scss lines and have it continue working, it’s like it hates everything besides the state the scss was in at the last commit…

Same problem here, already tried all the things suggested here but with no luck :frowning:
I’m stucked.

My config.json

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/project-name",
  "devUrl": "http://project-name.test:9999",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

This always worked on many previous projects, just on this one I have this problem and I done the same.

Obviously http://project-name.test:9999 works as expected.

First time I installed the project in a wrong directory, then I moved to the correct directory (MAMP workspace). But I just tried to delete and reinstall the whole project in the correct directory but it’s the same.

Solved. It was a strange error during yarn command, related to node-gyp.
Solved with this command:

The same happening to me sometimes. I just stop and rerun yarn start and it’s ok again.

Similar as when a new image or js file is edit everything goes to hell, then rerunning yarn does the job.

Is this related to sage 9? If so, there is a PR that should fix this issue:

What would be the best way to implement this PR on an existing Sage project that is on a different repo?
On the time of writing this the PR hasn’t been approved and merged. I feel I should test it first on a different branch on my projects local repo.

In my project I have added a new remote repo url pointing to Root’s Sage’s Repo. Checkedout the PR to a new branch. (Used this guide https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/checking-out-pull-requests-locally).

From this point I wanted to merge my master into the PR branch to test it. I get all kinds of merge conflicts. Feels like an long hassle to get through it all. Seems like it asking me for every possible change. It doesn’t feel right.

Isn’t there a yarn command that would update the dependencies that would fix the broswersync bug? This bug is major.

Indeed, the PR hadn’t been merged in yet, some review happened but no merge yet. Always review anything yourself and not just blindly use something so you can avoid unnecessary build headaches.

Sage 9 also runs a script on top of it that adds framework-specific (which can be selected) modifications.
See this discussion that also shows how to create a Sage project using the update branch:

You create a new Sage 9 project using that PR, then you overwrite all the files (except vendor/ and node_modules/ of your own project with the ones of the newly created Sage 9 (PR) project).
Then you can diff/merge everything, which means that you keep your own modifications but keep the new ones from the PR. Most modifications happened in the webpack-related configuration files (“glue”-code), so it shouldn’t be that much to adjust.

1 Like

Thank you for the info. It works! The Browsersync bugs is fixed when updating with the PR. :slight_smile:

Please mark my post as answer so the discussion is indicated as completed.

When I swapped from Node v14 to Node v8 :mask: this started working, no endless reloads (an old project from someone).

For some reason got a hint only sometimes, not always:

Module build failed: ModuleBuildError: Module build failed: Error: Missing binding
Found bindings for the following environments:

  • OS X 64-bit with Node.js 8.x

Basically run

nvm use v8

(make sure node v8 is available of course)

I’ve the same problem on Sage 10, here more details:

Please, someone can help me?

Any warnings/errors in the JavaScript console?
What does the Network tab say? Connections that are cancelled each time?