Browsersync page refresh loop

sage
1

My config file:

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

after yarn start my localhost:3000 refreshes instantly… What I do wrong?
all path are ok
and everything was ok, before I installed some npm-libs

1 Like
2

Are you devUrl and canonical URL for WordPress the same?

Also, using a .info TLD for a development site is most likely not a good idea. I would recommend switch it to .test or .localhost as they are reserved for purposes like development.

3

yes, there are
I can access my webpage by this domain

4

Is this your development URL? Is the site being served by a local web server like MAMP or something similar? Sage’s development process only works for a development site served locally. (Reread the original post, sorry.)

If you delete your node_modules and rerun yarn && yarn start does it work? Or if you remove those packages you installed does it work?

Also, are there any error messages that Webpack is displaying?

If none of that works, In resources/assets/build/webpack.config.watch.js, temporarily add the following so we can get some useful debugging output:

    new BrowserSyncPlugin({
      target,
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
+     advanced: {
+       browserSync: {
+         logLevel: 'debug',
+       },
+     },
    }),

Once you’ve added that, run yarn start and report on or dump the output here.

5

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

also: here is output Screenshot by Lightshot

6

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

7

@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
8

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.

9

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.

10

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

I just get endless browser reloads! No idea why.

11

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!

12

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.

13

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…

15

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.

16

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

18

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.

19

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

20

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.

21

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
22

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