Webpacker: Seem turbolinks first init doesn't load <%= javascript_pack_tag "attempt" %>

[Davidzhu001]

problem:
when i put my <%= javascript_pack_tag "attempt" %> inside my show page.
it doesn't load when turbolinks reach the page.

I have to either click twice or refresh page

[gauravtiwari]

Did you looked at this thread? https://github.com/rails/webpacker/issues/161

[Davidzhu001]

Yes, I did.
Let me give a demo of the code.

import Vue from 'vue/dist/vue.esm'
import Downloads from './components/downloads.vue'
import TurbolinksAdapter from 'vue-turbolinks';


document.addEventListener('turbolinks:load', () => {
  var element = document.getElementById("downloads")
  if (element != null) {
  var downloads_vue = new Vue({
    el: element,
    template: '<Downloads/>',
    mixins: [TurbolinksAdapter],
    components: { Downloads }
  });
  } 
  else {
    console.log('not found element')
  }
      console.log('event touched')

});

```

<%= javascript_pack_tag 'downloads' %>

````

First time click page throught turbolinks

[Davidzhu001]

@gauravtiwari in that sense, we can assume that event is not even called right? turbolinks:load

[Davidzhu001]

@gauravtiwari my bad, the file is loaded after turbolinks:load

[chrismanderson]

I'm sorry to revisit a closed issue, but what is the solution? I'm running into the exact same problem; Turbolinks fails to load on the first visit to a show page that loads a javascript_pack_tag itself. I've attached handlers to as many Turbolinks events as I can find inside of the pack file but they are never triggered on that first load.

[gauravtiwari]

@chrismanderson Are you using vue?

[chrismanderson]

I'm not, I'm using React. If I visit an index then a show page; the pack file just does not load until after all the Turbolinks events have fired. (Generated from a Rails scaffold.)

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div style={{backgroundColor: 'green', color: 'white'}}>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  console.log("DOMContentLoaded - RACT")
})

// Does not load until a refresh
document.addEventListener('turbolinks:load', () => {
  renderContainer('turbolinks:load')
})

const renderContainer = (event) =>  {
  console.log `Rendering ${event}`
  let element = document.getElementById("react-box")

  if (!element) {
    return
  } else {
    let container = document.getElementById("react-container")

    if (!container) {
      container = document.createElement('div')
      container.id = "react-container"

      ReactDOM.render(
        <Hello name={event} />,
        element.appendChild(container),
      )
    }
  }
}

<%= javascript_pack_tag 'hello_react' %>

<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @post.title %>
</p>

<p>
  <strong>Body:</strong>
  <%= @post.body %>
</p>


<div id="react-box"></div>

[gauravtiwari]

Have you included turbolinks to the app? (sprockets or webpacker?)

[chrismanderson]

Yup; it's a generic Rails app created with rails new react-links --webpack=react (https://github.com/chrismanderson/react-turbolinks-demo)

[renanbronchart]

Hello @gauravtiwari,
I have the same problem but with Vue, do you know where is the problem ?

[gauravtiwari]

@renanbronchart Have you tried this? https://github.com/jeffreyguenther/vue-turbolinks

[renanbronchart]

Thanks @gauravtiwari

[pyrabbit]

I have had a similar issue with Turbolinks not being loaded on certain edge cases. I had to add the code at the bottom of the javascript file being imported by my javascript_pack_tag my get it to work consistently without error.

if (!Turbolinks) {
    location.reload();
}

Turbolinks.dispatch("turbolinks:load");