Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Browser-sync with Rails and turbolinks give white page #977

Open
anthony-robin opened this issue Jan 24, 2016 · 21 comments
Open

Browser-sync with Rails and turbolinks give white page #977

anthony-robin opened this issue Jan 24, 2016 · 21 comments

Comments

@anthony-robin
Copy link

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
@shakyShane
Copy link
Contributor

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 :)

@anthony-robin
Copy link
Author

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

@sido378
Copy link

sido378 commented Jan 27, 2016

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

@Gee-Bee
Copy link

Gee-Bee commented Feb 8, 2016

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

@cbilgili
Copy link

cbilgili commented Feb 9, 2016

+1 I have same problem too

@pantgurra
Copy link

+1 I also have this problem

@zuuno
Copy link

zuuno commented Feb 19, 2016

+1 here

@guemidiborhane
Copy link

+1 having the exact same problem

@jrasanen
Copy link

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"

@sudomf
Copy link

sudomf commented Apr 1, 2016

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" ';
        }
      }
    ]

@sandrodz
Copy link

sandrodz commented Apr 6, 2016

Good workaround but, actually fixing this would be awesome!

@mrkongo
Copy link

mrkongo commented Jul 24, 2016

+1

@mrkongo mrkongo mentioned this issue Jul 24, 2016
Closed
@mrkongo
Copy link

mrkongo commented Jul 24, 2016

With turbolinks 5? How to fix?

@cadizjavier
Copy link

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

@mrkongo
Copy link

mrkongo commented Jul 26, 2016

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?

@sudomf
Copy link

sudomf commented Jul 31, 2016 •
edited
Loading

@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

@swrobel
Copy link

swrobel commented Aug 18, 2016

@maykefreitas this would be a great wiki page!

@sudomf
Copy link

sudomf commented Sep 5, 2016

@swrobel good idea 👍

@calebeby calebeby mentioned this issue Sep 24, 2016
Closed
@shakyShane
Copy link
Contributor

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

@Pushplaybang
Copy link

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

@sudomf
Copy link

sudomf commented Jul 27, 2017

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

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

cc: @swrobel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests