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

[jakkrobbit]

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
• [x] windows
• [ ] OS X
• [ ] freebsd
• [ ] solaris
• [ ] other _(please specify which)_

Browsersync use-case

• [X] API
• [X] 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();
});

[entozoon]

Same problem here, even without Gulp, e.g. from commandline:

browser-sync start --server --files "dist/*.css"

Or as an npm script:

{
  "scripts": {
    "serve": "browser-sync start --server --files 'dist/*.css'"
  }
}

They serve the page and watch the files, as normal, outputting

[Browsersync] Serving files from: ./
[Browsersync] Watching files...
[Browsersync] File event [change] : dist\app.css

But there is no change in the browser, no reload/injection.

I have tried a couple of computers (Windows 10), various browsers and a few versions of browser-sync too, so I wonder if there is something more systemic going on here.

The browser has no console messages, so perhaps the socket connection isn't hooking in at all?

[jakkrobbit]

I forgot to mention Browser-sync still reports reloads/injections on the command line, like usual, but nothing shows up in the browser. So maybe it is a websocket issue.

[entozoon]

Sorry to confuse issues, but I fixed my problem by a combination fo uninstalling browser-sync and cleaning the npm cache a bunch, Then re-installing and replacing the apostrophes in the npm script such that it becomes

"serve": "browser-sync start --server --files \"dist/*.css\""

Fun times.

[edenprojectde]

1422 Maybe i dupped this. Sorry

[jakkrobbit]

So, after using browser-sync for other projects at home and at work, I realized this issue only seems to happen with PHP sites. I'll try uninstalling and reinstalling to see if that helps.

[jakkrobbit]

I switched from IIS to Apache about a week ago, and now everything seems to be working fine. So, I guess the problem has to do with PHP sites running on IIS.

[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.

[englishextra]

Here's my 10 cents:

I checked to setups:

some older packages:

        "@babel/core": "^7.1.2",
        "@babel/plugin-transform-arrow-functions": "^7.0.0",
        "@babel/plugin-transform-async-to-generator": "^7.1.0",
        "@babel/plugin-transform-object-assign": "^7.0.0",
        "@babel/preset-env": "^7.1.0",
        "browser-sync": "^2.10.1",
        "gulp": "^3.9.1",
        "gulp-autoprefixer": "^3.1.0",
        "gulp-babel": "^8.0.0",
        "gulp-clean-css": "^4.0.0",
        "gulp-cli": "^1.4.0",
        "gulp-concat": "^2.6.1",
        "gulp-plumber": "^1.2.1",
        "gulp-prettier": "^2.0.0",
        "gulp-rename": "^1.4.0",
        "gulp-replace": "^1.0.0",
        "gulp-sass": "^2.1.1",
        "gulp-sourcemaps": "^2.6.4",
        "gulp-strip-debug": "^3.0.0",
        "gulp-uglify": "^3.0.1"

and some fresh - notice that gulp is 3.91 not 4

        "@babel/core": "^7.2.2",
        "@babel/plugin-transform-arrow-functions": "^7.2.0",
        "@babel/plugin-transform-async-to-generator": "^7.2.0",
        "@babel/plugin-transform-object-assign": "^7.2.0",
        "@babel/preset-env": "^7.2.0",
        "browser-sync": "^2.26.3",
        "gulp": "^3.9.1",
        "gulp-autoprefixer": "^6.0.0",
        "gulp-babel": "^8.0.0",
        "gulp-clean-css": "^4.0.0",
        "gulp-cli": "^2.0.1",
        "gulp-concat": "^2.6.1",
        "gulp-plumber": "^1.2.1",
        "gulp-prettier": "^2.0.0",
        "gulp-rename": "^1.4.0",
        "gulp-replace": "^1.0.0",
        "gulp-sass": "^4.0.2",
        "gulp-sourcemaps": "^2.6.4",
        "gulp-strip-debug": "^3.0.0",
        "gulp-uglify": "^3.0.1"

both setups work: after watched events browsers do reload,

but then I added some other devDependencies:

        "adaptivecards": "^1.1.0",
        "any-resize-event": "^1.0.0",
        "imagesloaded": "^4.1.4",
        "jquery": "^3.3.1",
        "lightgallery.js": "^1.1.1",
        "macy": "^2.3.0",
        "minigrid": "^3.1.1",
        "mustache": "^2.3.0",
        "normalize.css": "^8.0.0",
        "vanilla-lazyload": "^10.19.0",
        "wolfy87-eventemitter": "^5.2.5"

then all compiles OK console says reloading browsers, but the browsers idle and won't react

[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