Roots Discourse

BrowserSync keeps reloading infinitely upon JavaScript changes

sage9

#1

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.




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

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.


#3

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.


#4

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.


#5

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.

#6

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' */
   },
}

#7

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?


#8

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


#9

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


#10

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


#11

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.