Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Components aren't mounted on turbolinks cache

See original GitHub issue

Help us help you! Have you looked for similar issues? Do you have reproduction steps? Contributing Guide

Steps to reproduce

Place a component on your page. Navigation to that page, then to another, then back to the page with the component.

In the period between turbolinks showing you the cached page, and fetching the new one, no components are mounted.

Expected behavior

The cached page should at least show the component. If remounting it temporarily has too many side effect. I know stimulus just mounts and unmounts it as the cache is replaced.

Actual behavior

The components don’t show up at all. There’s just empty space.

System configuration

Sprockets or Webpacker version: 3.5 React-Rails version: 2.4 Rect_UJS version: 2.4.4 Rails version: 5.2.2 Ruby version: 2.4.5

I’m not actually sure if I should be posting this here or over at turbolinks, but seeing as not even data-turbolinks-permanent, I feel like it must be something react-rails is doing.

If you render a component, navigate away, and navigate back, the component is gone until turbolinks finishes loading. Even if the component has a data-turbolinks-permanent tag, or if its parent has it. The component just doesn’t exist.

So if I have a slow page load, I end up with many seconds of elements just… not there. It’s not very pretty.

Here’s a gif of what I mean. After navigation back to the first page, the table doesn’t mount.

1oumczyorq

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:11 (2 by maintainers)

Top GitHub Comments

1reaction

ksweetiecommented, Nov 9, 2020

To re-render components immediately, I added:

document.addEventListener("turbolinks:render", function(event) {
  ReactRailsUJS.mountComponents()
})

That avoids flickering when loading a cached page, but it ends up calling mountComponents twice: once after rendering the cached version, and again after rendering the fresh version, which may or may not be what you want.

If anyone has a better workaround, I’d be interested.

1reaction

n8tacommented, Jul 10, 2019

For future people who see this I had a same symptoms that I fixed by moving
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> the the last line of <head></head>

Top Results From Across the Web

Turbolinks · react_on_rails - ShakaCode

To turn on tracing of Turbolinks events, put this in your registration file, where you register your components. ReactOnRails.setOptions({ traceTurbolinks: ...

Admin panel Turbolinks by Tina Hammar - Tricks - Filament

php file if you want to add Turbolinks to the Filament Admin panel. Steps. Install hotwire/turbo; Create filament-turbo.js; Add it to webpack.

Documentation for rails/turbolinks (master) - RubyDoc.info

New elements have been loaded into the DOM via partial replacement. page:restore, A cached body element has been loaded into the DOM. page:after-remove ......

Turbolinks causes ReactDOM to render a second time after ...

I think turbolinks load the cached js files and then load the fetched js files, which may cause your react component to render...

Migrate an existing app to Turbolinks - DEV Community ‍ ‍

Tagged with turbolinks, javascript, rails, frontend. ... Clear Turbolinks cache before ajax requests document.addEventListener('ajax:before ...