title: DOMContentLoaded not firing after navigation but fires on page reload when using javascript_pack_tag
body: <p>I'm working with a Rails 6 rc1 project with React and Webpacker.</p>
  
  <p>I'm currently using <code>javascript_pack_tag</code> to render React components in my Rails app. I'm trying not to use a gem like <code>react-rails</code> just to keep things simple.</p>
  
  <p>Today I found a weird behavior where my React component would not render after the page is navigated to from a link. However, on a page reload, my component is rendered.</p>
  
  <p><code>Gemfile</code>:</p>
  
  <pre><code>gem 'rails', '~&gt; 6.0.0.rc1'
  gem 'pg', '&gt;= 0.18', '&lt; 2.0'
  gem 'puma', '~&gt; 3.11'
  gem 'sass-rails', '~&gt; 5'
  gem 'webpacker', '~&gt; 4.0'
  gem 'turbolinks', '~&gt; 5'
  gem 'jbuilder', '~&gt; 2.5'
  gem 'bootsnap', '&gt;= 1.4.2', require: false
  gem 'devise', '~&gt;4.6'
  
  group :development, :test do
    gem 'pry-byebug'
    gem 'rspec-rails', '~&gt; 3.8'
  end
  
  group :development do
    gem 'web-console', '&gt;= 3.3.0'
    gem 'listen', '&gt;= 3.0.5', '&lt; 3.2'
    gem 'spring'
    gem 'spring-watcher-listen', '~&gt; 2.0.0'
  end
  </code></pre>
  
  <p><code>app/views/layouts/application.html.erb</code>:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %&gt;
  ....
  </code></pre>
  
  <p><code>app/javascript/packs/application.js</code>:</p>
  
  <pre><code>require("@rails/ujs").start()
  require("turbolinks").start()
  require("@rails/activestorage").start()
  require("channels")
  
  import "bootstrap"
  import "../stylesheets/application"
  </code></pre>
  
  <p><code>app/views/posts/new.html.erb</code>:</p>
  
  <pre><code>&lt;%= content_tag :div,
    id: 'post_data',
    data: @post do %&gt;
  &lt;% end %&gt;
  &lt;div id="render_here"&gt;&lt;/div&gt;
  &lt;%= javascript_pack_tag 'new_post' %&gt;
  
  </code></pre>
  
  <p><code>app/javascript/packs/new_post.jsx</code>: (though the React code in this file isn't really relevant for the question)</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import PostForm from '../components/PostForm';
  
  document.addEventListener('DOMContentLoaded', () =&gt; {
    const node = document.getElementById('post_data');
    const data = JSON.parse(node.getAttribute('data'));
    const dom = document.querySelector('#render_here');
  
    ReactDOM.render(
      &lt;PostForm post={data} /&gt;,
      dom);
  });
  </code></pre>
  
  <p>With this setup, the component is not rendered after clicking on a link that navigates to the page. On page reload, the component is rendered.</p>
  
  <p>I tried a number of things.</p>
  
  <p>In <code>new_post.jsx</code>, after commenting everything out and leaving only <code>console.log(document.readyState)</code>, the console displays <code>complete</code> twice. On page load, it displays <code>loading</code>.</p>
  
  <p>Then I tried to use jQuery's <code>document.ready</code> in <code>new_post.jsx</code>:</p>
  
  <pre><code>$(document).ready(function() {
    if (pageInitialized) {
      return;
    }
    pageInitialized = true;
  
    console.log('render');
  ...
  </code></pre>
  
  <p>And again, <code>render</code> is displayed twice after the page is navigated to. On page reload, <code>render</code> is displayed once.</p>
  
  <p>What is going on?</p>