Giters

BrowserSync / browser-sync

Keep multiple browsers & devices in sync when building websites. https://browsersync.io

Home Page:https://discord.gg/2d2xUThp

Repository from Github https://github.comBrowserSync/browser-syncRepository from Github https://github.comBrowserSync/browser-sync

Browser-sync with Rails and turbolinks give white page

anthony-robin opened this issue · comments

commented

I have setup browser-sync gulp plugin in my rails project and I had a white page issue when using turbolinks navigation. If I look at the source code, the page is properly sent to the browser but is not displayed.

Here is my browser-sync gulp code:

gulp.task 'init', ->
  browserSync.init
    proxy: '127.0.0.1:3000' # Rails server
    port: 3001
    open: false
    notify: false
    ui: false
commented

I'm not familiar with how turbo links work - but if you could provide a sample project/demo for me to try it on I can take a look :)

commented

Here is a basic Rails 4 project using Turbolinks and Gulp: https://github.com/anthony-robin/browsersync-turbolinks
Thanks !

commented

+1, got the same problem, running:
browser-sync start --proxy localhost:3000 --files "app/assets/stylesheets/*.scss, app/views/*.html.erb"

commented

+1, same here.
Running browser-sync with:

browser-sync start --proxy localhost:3000 --files "**/*, \!tmp, \!log"

In chrome console i get Cannot read property 'dataXXX' of null from browser-sync-client.js.
After manually refreshing the page it's ok.
Auto refreshing on file change also works as expected. This problem happens after clicking on link handled by turbolinks.

commented

+1 I have same problem too

commented

+1 I also have this problem

commented

+1 here

commented

+1 having the exact same problem

commented

Same here, but has it ever worked with Turbolinks or is this a regression? I'm getting an error "Uncaught TypeError: Cannot read property 'data1458034842634' of null"

commented

Hey you guys, I have the same problem and I fix it configuring browsersync to rewrite the <body> tag to disable turbolinks while executing of gulp. Hope that It can help you :)

rewriteRules: [
      {
        match: /<body/,
        fn: function (match) {
          return '<body data-no-turbolink="true" ';
        }
      }
    ]
commented

Good workaround but, actually fixing this would be awesome!

commented

+1

commented

With turbolinks 5? How to fix?

commented

@mrkongo With turbolinks 5 the signature to disable it is data-turbolinks="false"
See https://github.com/turbolinks/turbolinks#disabling-turbolinks-on-specific-links
The workaround still works.

commented

But I need a way to fix this, because I need both Turbolinks and BrowserSync. Ho to do it?

There is an alternative to BrowserSync with gulp?

commented

@mrkongo @sandrodz @anthony-robin and other guys, I found a way to fix this issue. Browsersync injects a script in html page inside body tag, that causes the issue, so I changed some settings in Browsersync to inject script at head tag instead of body tag.

snippetOptions: {
      rule: {
        match: /<\/head>/i,
        fn: function (snippet, match) {
          return snippet + match;
        }
      }
    }

Hope that it can help you :D

commented

@maykefreitas this would be a great wiki page!

commented

@swrobel good idea 👍

commented

I really want to resolve this - can someone point me to a sample project that has a docker setup?

commented

@shakyShane not sure why you're asking about docker, but I'm using browserSync with docker, and turbo links on a small WordPress project, and its 100% with the options provided above by @maykefreitas.

This is a non-issue for browserSync, as it caused by turbolinks replacing content in the body, and reloading any scripts inside the body. This is the expected behavior, in order to avoid this we simply have to move the browserSync script to the head.

commented

Hey guys, just created the Wiki page, sorry for the long delay.

https://github.com/BrowserSync/browser-sync/wiki/Browsersync-for-Turbolinks

cc: @swrobel