Browser-sync: Snippet can't be loaded from server

[fabianhenzler]

<script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.8.0.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

[shinnn]

https://github.com/BrowserSync/browser-sync/blob/f8c6a0ae33a1150a3cc7c4844a9dc1f8a6ba7407/CONTRIBUTING.md#tips

[fabianhenzler]

Here is my gulpfile

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    reload = browserSync.reload,
    sass = require('gulp-sass');

// register the browsersync plugin to inject snippet
browserSync.use(require('bs-snippet-injector'), {
    // path to the file containing the closing </body> tag
    file: 'footer.php'
});

// browser-sync task for starting the server.
gulp.task('browser-sync', function () {
    //watch files
    var files = [
        './style.css',
        './*.php'
    ];

    //initialize browsersync
    browserSync.init(files, {});
});

// Sass task, will run when any SCSS files change & BrowserSync
// will auto-update browsers
gulp.task('sass', function () {
    return gulp.src('sass/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./'))
        .pipe(reload({stream: true}));
});

// Default task to be run with `gulp`
gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch("sass/**/*.scss", ['sass']);
});

This is my app structure within wordpress

This is the node_modules

[fabianhenzler]

and last but not least the running app

[shinnn]

:point_right: https://github.com/shakyShane/bs-snippet-injector/issues

[fabianhenzler]

I can also insert the snippet given to me by the terminal in the footer.php right before the and it won't work!
So it has nothing to do with bs-snippet-injector

[shinnn]

Create a smallest possible example to clarify what is the matter.

How does your footer.php look like?

[fabianhenzler]

<?php /**/ ?>
    </div><!-- #content -->

    <footer id="colophon" class="site-footer" role="contentinfo">
        <div class="site-info">
            <a href="<?php echo esc_url( __( 'https://wordpress.org/', '_m' ) ); ?>"><?php printf( esc_html__( 'Proudly powered by %s', '_m' ), 'WordPress' ); ?></a>
            <span class="sep"> | </span>
            <?php printf( esc_html__( 'Theme: %1$s by %2$s.', '_m' ), '_m', '<a href="https://twitter.com/fabianhenzler" rel="designer">Fabian Henzler</a>' ); ?>
        </div><!-- .site-info -->
    </footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>
<script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.8.2.js'><\/script>".replace("HOST", location.hostname));
//]]></script>
</body>
</html>

[shakyShane]

try changing the src of the script to http://localhost:3000/browser-sync/browser-sync-client.2.8.2.js

[fabianhenzler]

My HOST is local.matrix42.com
So it turns out that it tries to load from http://local.matrix42.com:3000/browser-sync/browser-sync-client.2.8.2.js
But also ...localhost:3000/browser-sync/browser-sync-client.2.8.2.js
or ...localhost/browser-sync/browser-sync-client.2.8.2.js
or ...local.matrix42.com/browser-sync/browser-sync-client.2.8.2.js
can't reach the script. I can't even find anywhere in the project

[fabianhenzler]

There is no browser-sync-client.2.8.2.js :(

and I did setup the project completely for 3 times now.
npm install browser-sync --save-dev

[shinnn]

Can you show us the result of:

$ node -v
$ npm -v
$ npm ls browser-sync

[fabianhenzler]

Ok. There seems to be an issue. What did I do wrong?
Install browser-sync globally again?

[shinnn]

Just a typo. npm ls broser-sync -> npm ls browser-sync

[fabianhenzler]

Oh sorry - and thanks for your patience :)
Shall I probably go back to npm 2.11.3 ?

[shinnn]

Hmm, you're actually using v2.8.2.

Shall I probably go back to npm 2.11.3 ?

Probably that's not related to this.

[fabianhenzler]

that's why I'm going with bs-snippet-injector to always be sure.

But where should the script be? in the node_modules/browser-sync/ folder? because I actually can't find it... or is it created dynamically somehow?

[fabianhenzler]

livereload works, but I want browsersync - we all want nothing but browsersync! =)

[shakyShane]

@fabianhenzler it's generated at run-time

[fabianhenzler]

I see... so this seems to be the problem in my case, right?

[shakyShane]

paste the snippet given to you in the terminal into the footer of your website (try all the paths you listed above), then, in the browser, _exactly_ what happens? Is it given a 404 error in the console? or any other error?

[fabianhenzler]

here the screenshot posted above

I used bs-snippet-injector or did inject the snippet manually right before the body. everything loads fine, except the browser-sync-client.2.8.2.js

it's a 404

[shakyShane]

Can you run it again, then try http://localhost:3000/browser-sync/browser-sync-client.js in a browser...

[fabianhenzler]

Hi @shakyShane as I mentioned 4 days ago with @shinnn it resolves also in a 404.
localhost:3000, local.matrix42.com:3000 I tried it with and without SSL/https
Seems the file is not created at runtime :(

[shakyShane]

^ note my url above is different to the one you posted before (doesn't contain the 2.8.2 part)

[fabianhenzler]

oh... I'm sorry!
this seems to work :)

[fabianhenzler]

but only for localhost:3000

[shakyShane]

Cool, so if you use the scriptPath option you can make it work.

scriptPath: function (path, port, options) {
    return options.get('absolute').replace('HOST', 'localhost');
}

[fabianhenzler]

ok, but this should be addressed generally, because the snippet proposed by the solution still is with the version ...2.8.2.js

[sc0ttwad3]

Adding my experience with this issue and what so far has become my workaround....

Starting with a fully working app that uses browser-sync with no issues. I make a copy of this working go-to starter kit project, change minor textual issues (project name, etc.) and run the app in development mode, where index.html loads with no problem, until about a week ago and every time since -- the start page in the browser-sync development server, has a 404 for browser-sync-client.2.8.2.js -- as mentioned by others above.

After days of hunting this down and following various false leads, unsuccessfully, I did something similar to what I see suggested in a comment above: Before the closing tag of my start page I manually entered:

<script async="" src="/browser-sync/browser-sync-client.js"></script>

Subsequent loading of the start page, no longer contains the 404, the page and site run without issues and the following code gets inserted as the first lines after the opening tag:

<script type="text/javascript" id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.2.9.3.js'><\/script>".replace("HOST", location.hostname));//]]></script>
<script async="" src="/browser-sync/browser-sync-client.2.9.3.js"></script>

Next, I remove the script tag I manually entered. The very next run of the app and the start page load, everything works correctly, no 404s and the same lines as above are inserted into the document.

So my workaround is to manually enter the script once that references browser-sync-client.js no version, load the site. close the site, remove the manually entered script, and from then on everything is fine.

This feels like somehow a reference to 2.8.2 is cached or lying around somewhere, that after manually entering the client script reference, it flushes that, and thereafter the correct script reference gets inserted.

Any updates on this issue or know of a better workaround, I see a reference to using the scriptPath option?

[fabianhenzler]

@sc0ttwad3 solution seems to be a good one and it's working :)

[kvcrawford]

Thank you @sc0ttwad3! I've filed a new bug report since I was experiencing this without the use of the bs-snippet-injector.

[localjo]

I just experienced this issue, spent a couple hours trying to track it down because I had made some changes that I thought might have triggered it. In the end, I think it was just BrowserSync resolving to a different version when I installed my project, and some kind of cache laying around. @sc0ttwad3's solution worked, but it's still not entirely clear what triggered the issue, or if there's an easier way of indicating what the issue is and then resolving it.

[kevnk]

thanks @sc0ttwad3

[sudosean]

just ran into this issue, same version. +1 to @sc0ttwad3 's solution