Browser-sync watches files, but doesn't reload/inject changes

Issue details

For several weeks now, when I start browser-sync, it gets to a certain point where it takes an unusually long time to load before displaying this message:

This page isn’t working localhost didn’t send any data. ERR_EMPTY_RESPONSE

Sometimes it will seem to work fine, and then it will give me that error page again.

Please specify which version of Browsersync, node and npm you’re running

• Browsersync [ 2.18.13 ]
• Node [ 6.10.13 ]
• Npm [ 5.3.0 ]

Affected platforms

• linux
• windows
• OS X
• freebsd
• solaris
• other (please specify which)

Browsersync use-case

• API
• Gulp
• Grunt
• CLI

for all other use-cases, (gulp, grunt etc), please show us exactly how you’re using Browsersync

I was originally doing this with a basic bs-config.js file.

module.exports = {
    "ui": {
        "port": 3001,
        "weinre": {
            "port": 8080
        }
    },
    "files": ["**/*.php", "css/*.css", "**/*.js"],
    "watchEvents": [
        "change"
    ],
    "watchOptions": {
        "ignoreInitial": true
    },
    "server": false,
    "proxy": "findmercy.dev",
    "port": 3000,
    "middleware": false,
    "serveStatic": [],
    "ghostMode": {
        "clicks": true,
        "scroll": true,
        "location": true,
        "forms": {
            "submit": true,
            "inputs": true,
            "toggles": true
        }
    },
    "logLevel": "warn",
    "logPrefix": "BS",
    "logConnections": true,
    "logFileChanges": true,
    "logSnippet": true,
    "rewriteRules": [],
    "open": false,
    "browser": "default",
    "cors": false,
    "xip": false,
    "reloadOnRestart": true,
    "notify": true,
    "scrollProportionally": true,
    "scrollThrottle": 0,
    "scrollRestoreTechnique": "window.name",
    "scrollElements": [],
    "scrollElementMapping": [],
    "reloadDelay": 0,
    "reloadDebounce": 0,
    "reloadThrottle": 0,
    "plugins": [],
    "injectChanges": true,
    "startPath": null,
    "minify": true,
    "host": null,
    "localOnly": false,
    "codeSync": true,
    "timestamps": true,
    "clientEvents": [
        "scroll",
        "scroll:element",
        "input:text",
        "input:toggles",
        "form:submit",
        "form:reset",
        "click"
    ],
    "socket": {
        "socketIoOptions": {
            "log": false
        },
        "socketIoClientConfig": {
            "reconnectionAttempts": 50
        },
        "path": "/browser-sync/socket.io",
        "clientPath": "/browser-sync",
        "namespace": "/browser-sync",
        "clients": {
            "heartbeatTimeout": 5000
        }
    },
    "tagNames": {
        "less": "link",
        "scss": "link",
        "css": "link",
        "jpg": "img",
        "jpeg": "img",
        "png": "img",
        "svg": "img",
        "gif": "img",
        "js": "script"
    }
};

I started using browser-sync with gulp to see if that somehow fixed whatever the issue is.

gulp.task('browser-sync', function () {
    browserSync.init({
        files: ["**/*.php", "css/*.css", "**/*.js"],
        proxy: 'findmercy.dev',
        open: false
    });
});

gulp.task('bs-reload', function () {
    browserSync.reload();
});

[nevnein]

Just in case anyone stumbles here, I’ve had the same issue and in my case it was related to badly formatted html, so this happens in PHP files that output stuff but not in a proper html>head+body structure. Check your opening and closing tags, hopefully it’s just that.

[uaibo]

Here’s the solution that worked for me:

browserSync.init({
  injectChanges: false
});

injectChanges is true by default: https://www.browsersync.io/docs/options#option-injectChanges