BrowserSync keeps reloading infinitely upon JavaScript changes

Yarn build works fine, yarn start works fine and reloads properly when changing views (php) or scss. When changing JavaScript BrowserSync keeps 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.

My dev environment: MacOS Mojave, Valet, node 11.2.0, Firefox 64.0.2
I’m using Bootstrap.

config.json:

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

I’ve tried numerous suggestions from similar posts.

https://discourse.roots.io/t/sage-9-browsersync-not-updating-right/10648/
https://discourse.roots.io/t/browsersync-reloading/10427
https://discourse.roots.io/t/browsersync-page-refresh-loop/12687

An overview of the suggested solutions (all of which didn’t work):

- run `composer clear-cache`  and `composer install` on the theme folder
- use `.localhost` or `.test` as TLD
- `sudo fkill :3000` then run `yarn start` again
- set `devUrl` in config.json and remove trailing slash
- change the proxyurl port in config.json
- set the correct `publicPath` in config.json to reflect file structure
- check if `proxyUrl` is pointing to the right browsersync session
- check if `wp_enqueue_script` for `sage/main.js` is not commented out
- run `valet unlink` and `valet link siteName` in the www/ directory
- increase browsersync delay in webpack.config.watch.js
- add `devServer.watchOptions.poll: true` in webpack.config.watch.js
- add `plugins.advanced.browserSync.logLeve: true` in webpack.config.watch.js

Any other suggestions or solutions would be greatly appreciated.

2 Likes

Hm, seems like an issue with the webpack HMR not Browsersync. If no one else, jumps in to help I’ll take a look at this when I get a chance.

You should try to get some more debug information. Check here to figure out which options need to be set to do that.

I’m shooting in the dark I’m afraid. I added some lines to the webpack config file.

Browser console is still displaying the same error (see original post). What might be usefull, it’s the Webpack/(webpack)-hot-middleware/client.js file on line 85 that throws the error.

The error is also displayed when viewing the website without browsersync (it continuously keeps throwing the error every few seconds). It’s not there when viewing the website with browsersync / yarn start - nor when it reloads upon changing .scss or .php files (but appears when changing .js files and the endless looping starts).

Added these to webpack.config.watch.js:

new webpack.LoaderOptionsPlugin({
    debug: true
}),

Added this to the browsersync plugin:

advanced: {
    browserSync: {
       logLevel: 'debug',
   },
}

And this to module. exports:

devServer: {
        watchOptions: {
            poll: true,
        },
    },

Output in terminal during load loop:

[Browsersync] Browser Connected: Firefox, version: 64.0
[BS] [HTML Injector] Stashing: http://localhost:3000/

Sometimes the second line (stashing:) is not displayed.

Sorry I never got to this. What I meant was, for the most verbose debugging info you need to enable debug for each dependency. From what I can tell from the options for each of the dependencies, you should be able to do this to get that:

advanced: {
    browserSync: {
       logLevel: 'debug',
   },
   webpackDevMiddleware: {
       logLevel: 'debug',  /* or 'trace' */
   },
   webpackHotMiddleware: {
       log: true,
   },
}

This should give you a more verbose log of what is happening on the HMR side of things.

I might be able to spin up a Sage 9 install to test this, but for now, if you could try this, then share the more verbose log it might be able to point us in a better direction.

Question, out of the box does this happen when you make any immediate change the JavaScript? Or does it work for a while and then, all of sudden, stop working? Because if it is the latter, I suspect there could be an error in your code that’s not being reported, and as a consequence, the HMR process breaks down and then Browsersync gets nothing from the proxy. I could be wrong though.

Thanks.

This happens immediately after changing a JavaScript file and using webpack/browersync (yarn start command). When running yarn build and testing the website at mysite.localhost, all JavaScript is executed properly.

I enabled the debug for webpack, this throws following error in the console and prevents browsersync from launching:

[BS] [debug] -> Starting Step: Finding an empty port
/Users/username/path/www/app/themes/sage/node_modules/browsersync-webpack-plugin/node_modules/webpack-hot-middleware/middleware.js:136
      log("webpack built " + (name ? name + " " : "") +
      ^

TypeError: log is not a function
    at /Users/username/path/www/app/themes/sage/node_modules/browsersync-webpack-plugin/node_modules/webpack-hot-middleware/middleware.js:136:7
    at Array.forEach (<anonymous>)
    at publishStats (/Users/username/path/www/app/themes/sage/node_modules/browsersync-webpack-plugin/node_modules/webpack-hot-middleware/middleware.js:127:11)
    at Compiler.onDone (//Users/username/path/www/app/themes/sage/node_modules/browsersync-webpack-plugin/node_modules/webpack-hot-middleware/middleware.js:33:5)
    at Compiler.applyPlugins (/Users/username/path/www/app/themes/sage/node_modules/tapable/lib/Tapable.js:61:14)
    at Watching._done (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:105:17)
    at compiler.emitRecords.err (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:79:19)
    at Compiler.emitRecords (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:371:38)
    at compiler.emitAssets.err (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:62:20)
    at applyPluginsAsyncSeries1.err (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:364:12)
    at next (/Users/username/path/www/app/themes/sage/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.callback (/Users/username/path/www/app/themes/sage/node_modules/stylelint-webpack-plugin/lib/run-compilation.js:57:5)
    at next (/Users/username/path/www/app/themes/sage/node_modules/tapable/lib/Tapable.js:220:14)
    at Compiler.compiler.plugin (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at next (/Users/username/path/www/app/themes/sage/node_modules/tapable/lib/Tapable.js:220:14)
    at module.exports.afterEmitHandler (/Users/username/path/www/app/themes/sage/node_modules/copy-globs-webpack-plugin/index.js:130:5)
    at Compiler.applyPluginsAsyncSeries1 (/Users/username/path/www/app/themes/sage/node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:361:9)
    at require.forEach.err (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:350:15)
    at /Users/username/path/www/app/themes/sage/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/username/path/www/app/themes/sage/node_modules/async/dist/async.js:1064:13)
    at /Users/username/path/www/app/themes/sage/node_modules/async/dist/async.js:969:16
    at /Users/username/path/www/app/themes/sage/node_modules/graceful-fs/graceful-fs.js:45:10
    at FSReqCallback.oncomplete (fs.js:148:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
1 Like

Sorry, I think the value I gave you for the webpack-hot-middleware options was the wrong one, what’s the output without it:

advanced: {
    browserSync: {
       logLevel: 'debug',
   },
   webpackDevMiddleware: {
       logLevel: 'debug',  /* or 'trace' */
   },
}

The issue is solved. I don’t know how though. A wrong publicPath in the config.json might have something to do with it. Is it possible it gets cached somewhere?

2 Likes

What did you change the publicPath from and what did you change it to?

I’ve changed it back and forth from /app/themes/probam to /app/themes/sage (where probam is the correct name of the theme).

But sage is the correct name of your theme directory? Look at all the paths you’ve shown in this thread (/Users/username/path/www/app/themes/sage/)

You’d have to rename the sage directory to probam if you wanted your publicPath to be /app/themes/probam

I don’t know if this is related, but every so often I end up with a similar reload loop. Solution is almost always solved with the Empty Cache and Hard Reload option in Chrome.

3 Likes

Is there no solution to this? Really annoying. Keep having to cancel and running yarn start again.

VM407 main.js:2208 Ignored an update to unaccepted module 28 -> 20 -> 19
[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.

[HMR]  - ./resources/assets/scripts/routes/home.js
[HMR] Reloading page

Did you try my suggestion?

I had the same problem. I resolved the problem by removing the yarn.lock file, the .cache-loader folder and the node_modules folder. Then I ran yarn && yarn watch.

1 Like

I had the same problem, But the problem wasn’t ocurring only with JS, but mainly with it.

For some reason, my publicPath was configured as:

“publicPath”: “/wp-content/themes/theme-name”

I checked in anouther project that I also use Sage, in which I didn’t have this probblem. And it was configured as:

“publicPath”: “/app/themes/theme-name”

So, I’ve changed the former to the second pattern, and the problem gone.

This is very strange, because the config.json is generated automatically.

Both projects were generated in the same machine. Could this be related to an update on Sage?

First I tryed deleting yarn.lock file, .cache-loader folder and the node_modules folder. I had problems running yarn after. I had to restore yarn,lock.

3 Likes

Out of the blue, one of my many Sage installs started to loop with Ignored an update to unaccepted module today (same as sadikyalcin’s msg above).

The only thing I can really add here is that Safari seems more robust und in fact does not end up in a reload loop. I cannot use Chrome for development for this single WP install / theme right now, not even in incognito mode. I can’t explain the difference in behavior between the browsers. I have cleared the cache, restarted the computer, and tried (nearly) all of the tricks mentioned in this thread.

I tried also a few other similar themes, and they don’t loop the same way. After I save a JS file, they do show the same message and reload but they don’t loop.

An update to my previous message: the problem disappeared as suddenly and unexpected as it first appeared.

Honestly, I spent hours trying to resolve the issue in the first place - nothing seemed to help. Then I did nothing, just tried a few days later and the problem was gone.

I was having the same issue and had a slash at the end of the devUrl.

Once I removed it, problem solved.

1 Like

Thanks, that worked for me!

This came up in another thread: Is it possible to "watch" without browsersync?

I’m guessing the mod might be useful also in persistent reload loop situations, where nothing else seems to help. I don’t have a failing env at hand right now to try with, but will definitely give it a shot should a need arise.