Turbolinks.start(), how does it work in react_on_rails?

[archonic]

This can be labeled as a question. I was trying to get turbolinks:load event firing. I included it using npm, and can see it in webpack-bundle.js. I followed the react_on_rails readme for turbolinks. I was seeing this in the console:

TURBO: NOT USING TURBOLINKS: DOMContentLoaded event, calling reactOnRailsPageLoaded
TURBO: reactOnRailsPageLoaded

I thought this meant I would need a place to call Turbolinks.start(), but this isn't required in the tutorial app. I found the missing piece:

module: {
  loaders: [
    ...
    { test: require.resolve('turbolinks'), loader: 'imports?this=>window' },
    ...
  ],
},

I'm wondering why that works.

[justin808]

I updated some of the instructions here: #573.

You want to include Turbolinks as an entry point. Maybe you are missing that.

Why do you have { test: require.resolve('turbolinks'), loader: 'imports?this=>window' }, ??

[archonic]

{ test: require.resolve('turbolinks'), loader: 'imports?this=>window' }, is in the tutorial app and was to be the only missing link to getting turbolinks events firing. Turbolinks was already included as an entry point.

A related issue that I solved: When requesting JS as a format and getting a redirect response, turbolinks 5 catches it and will execute a redirect. But it needs to load it's engine and this code to work. I found easiest way to fix that was to bundle turbolinks but leave out the JS require.

[justin808]

@archonic Any chance that you can submit a doc PR to this file: https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/turbolinks.md

[archonic]

Will do, I'll submit something once I get it working completely. I still have to get the progress bar working. If you have any suggestions there, I'm all ears.

[justin808]

FWIW, I noticed an open source project using TurboLinks with React on Rails. I posted a question there:

https://github.com/coderwall/coderwall-next/issues/63

They run this code in their client registration file:

turbolinks.start()

ReactOnRails.setOptions({
  traceTurbolinks: TRACE_TURBOLINKS, // eslint-disable-line no-undef
})