Infinite reload on Javascript Changes (Docker environment - boilerplate setup linked)

After many times of getting it to work, given the many different errors I’ve gotten (infinite reloading on browser, ignoring scss changes, ignoring javascript changes and both of them at once among them), right now I’m at a loss.

It was working fine, when I started editing an already existing scss file. Make my changes, save the file and got linter errors, solve them all, and no change… Strange. Try to change another file… same again. Is this framework so fragile? I mean it’s impossible to work with it.

Anyone with similar experiences?

Just to clarify, config.json is configured as it should, and the build works fine. It’s just the feeding of changes to webpack, which is not consistent.

EDIT: I’ve done composer clear-cache, followed by composer install on the theme folder, and it works yet again.

Boilerplate setup: https://git.albertdev.com/ganlub/boilerplate-wp

So we can get started with your issue, can you please:

  • Post your config.json.
  • Describe your local development environment. macOS or Windows? Are you using Trellis (Vagrant)? MAMP? What version of Node are you using (node -v)?
  • Are there any errors in the browser console?
  • Are you using Bootstrap? If not, what CSS framework — if you are using one — are you using?

If you don’t like Stylelint — I don’t always use it — you can always disable it by removing the following lines in the corresponding files:

https://github.com/roots/sage/blob/fd2a94fa1b8fa5b4767b5f0f825ec364564d0efa/resources/assets/build/webpack.config.js#L179-L182

Here’s a list of solutions to common issues with Browsersync + Webpack I’ve compiled:

https://discourse.roots.io/t/sage-9-browsersync-not-updating-right/10648/11?u=knowler

4 Likes

Hey, when I get the chance I’ll edit this post with all the info you mentioned, but just as an advance, it’s a docker environment, compounded of different images. nginx, mysql, node, two for composer (bedrocks and sage separately, which just take care of installing/updating vendor libs).

The node one, is tasked with starting webpack, with yarn start (straight from the docs). Then config.json publicPath is path to then (with bedrocks naming).

And as said, I’ll be more specific when I get the chance.

  • config.json
    {
    “entry”: {
    “main”: ["./scripts/main.js", “./styles/main.scss”],
    “customizer”: ["./scripts/customizer.js"],
    “partials”: ["./scripts/partials/header.js"]
    },
    “publicPath”: “/app/themes/clicktime”,
    “devUrl”: “http://nginx”,
    “proxyUrl”: “http://localhost:3000/”,
    “cacheBusting”: “[name]_[hash:8]”,
    “watch”: [“app//*.php", "config//.php", "resources/views/**/.php”]
    }

  • Docker running on Archlinux. Node version 10.x

  • No errors on the browser console

  • Using Bootstrap.

Also, I think it’s worth noting that with a clean setup, both scss, and js compiling worked fine. Yet as soon as I started adding .scss or .js files, it stopped working as it should.

What URL are you trying to access the site at? Is it from the Nginx container or the Node one?

Your config.json looks correct. Sage uses Browsersync to proxy your devUrl (http://nginx) so you can access it at the proxyUrl (http://localhost:3000). If you tried to access it at the devUrl after that would explain the lack of updates to scripts + styles, since Sage attaches an HMR client to just the proxyUrl. You shouldn’t use the devUrl to view the site after you’ve ran yarn start.

Also, you’ll want to change Node to 9.x.

Hey thanks for the reply. I access through the proxyUrl as mentioned on the docs.

Browser Sync works fine as long as any .js file isn’t modified. Once I modify any of them, it’s begins to loop, till webpack watch is terminated.

Just tested with Node 9.x and I have the same problems.

Interesting message on console: The connection to http://localhost:3000/__webpack_hmr was interrupted while the page was loading. main.js:1040:13

Can you share your Dockerfile and/or docker-compose.yml?

What JS are you adding?

Hey, so we’ve created a boilerplate project with our settings: https://git.albertdev.com/ganlub/boilerplate-wp

There is a readme.md file. If you follow the first section Quickstart you should be up and running in a matter of minutes.

Check the .env file on the root project folder, and set the variables to your user UID and GID. (This command should give them to you: echo $(id -u):$(id -g)).

So, at src/web/app/themes/test/resources/assets/scripts/routes/common.js, you can try to add a console.log, and saving the file (maybe try removing it again) and wbpack should stop working as expected soon enough if not right away, in our case it’s infinite reload loop.

Also you can try to do docker-compose up nginx and changing "devUrl": "http://nginx", to "devUrl": "http://localhost", and running webpack locally with yarn start on the theme folder. to discard docker problems. In our case, it doesn’t work either.

Please let us know, if you find anything wrong.
Thanks in advance.

2 Likes

Foundation or Bootstrap?

We had a similar issue when using Foundation as the freamework and the solution was to replace Bubl (sp.) with Babel.

Hey, thanks for the lead. Will try and update when I try it. Thanks again!

I’m having the exact same issue, except not with docker.

My dev environment: MacOS Mojave, Valet, node 11.2.0, Firefox 64.0.2

[Only] When saving a javascript file, the browser starts reloading infinitely. The console then returns this error before reloading:
The connection to http://localhost:3000/__webpack_hmr was interrupted while the page was loading.

I’m using Bootstrap.

config.json:

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

Existing threads on same issue that have different solutions:

https://discourse.roots.io/t/browsersync-reloading/10427
https://discourse.roots.io/t/problem-with-browsersync/13932

and probably more if you continue to search. I’m locking this thread as it’s old (and you’re also not using Docker), and you should be able to figure out the solution from existing threads. If you can’t figure it out, please start a new topic!

Maybe start by trying to remove the / at the end of your devUrl (ref https://github.com/roots/sage/blob/19057f60be1a5ecc466b2a0a1cb0eca0d367bb6e/resources/assets/config.json#L12) — then check to see if anything is already running on port 3000. If there is, kill it or change the proxy port in the config.