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

nyenye · June 22, 2018, 9:13am

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

knowler · June 22, 2018, 5:31pm

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:

github.com

roots/sage/blob/fd2a94fa1b8fa5b4767b5f0f825ec364564d0efa/resources/assets/build/webpack.config.js#L7


      
          'use strict'; // eslint-disable-line
          
          const webpack = require('webpack');
          const merge = require('webpack-merge');
          const CleanPlugin = require('clean-webpack-plugin');
          const ExtractTextPlugin = require('extract-text-webpack-plugin');
          const StyleLintPlugin = require('stylelint-webpack-plugin');
          const CopyGlobsPlugin = require('copy-globs-webpack-plugin');
          const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
          
          const config = require('./config');
          
          const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';
          
          let webpackConfig = {
            context: config.paths.assets,
            entry: config.entry,

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

nyenye · June 23, 2018, 7:17am

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

image950×528 102 KB
Using Bootstrap.

nyenye · June 25, 2018, 10:36am

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.

knowler · June 25, 2018, 4:20pm

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.

knowler · June 25, 2018, 4:24pm

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

github.com/roots/sage

Node v10.x Compatibility

opened 10:06PM - 01 May 18 UTC

closed 11:23PM - 04 Dec 18 UTC

runofthemill

enhancement

## Submit a feature request or bug report - [x] I've read the [guidelines for… Contributing to Roots Projects](https://github.com/roots/guidelines/blob/master/CONTRIBUTING.md) - [ ] This is a feature request - [x] This is a bug report - [x] This request isn't a duplicate of an [existing issue](https://github.com/roots/sage/issues) - [x] I've read the [docs](https://roots.io/sage/docs) and [NPM Debugging Guidelines post](https://discourse.roots.io/t/npm-debugging-guidelines-failed-npm-install-bower-install-or-gulp-build-read-this/3060) and followed them (if applicable) - [x] This is not a personal support request that should be posted on the [Roots Discourse](https://discourse.roots.io/c/sage) forums --- **What is the current behavior?** `yarn` fails as a some dependencies are not yet updated for Node v10.x **What is the expected or desired behavior?** All `yarn` commands work as expected --- As not all dependencies have been updated, I am creating this issue for tracking, and can update as new issues are found. Dependency | Current Version | Latest Version | Node v10.x Compatible? -------------|-----------------|---------------|---------------- `node-sass`| `~4.8.3` | `4.9.0` | Yes `webpack` | `~3.10.0` | `4.6.0` | No, but there are commits to `head` to fix

nyenye · June 25, 2018, 4:40pm

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

knowler · June 25, 2018, 4:55pm

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

What JS are you adding?

nyenye · June 25, 2018, 5:42pm

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.

slam · August 11, 2018, 12:47pm

Foundation or Bootstrap?

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

nyenye · August 11, 2018, 1:14pm

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

Jan-Klaas · January 25, 2019, 4:15pm

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"
  ]
}

ben · January 25, 2019, 4:20pm

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.