Rails 6 + Webpack document.addEventListener 不起作用

Question

My code is as under

// app/javascript/packs/application.js
import 'select2';
document.addEventListener(
  'turbolinks:load', function() {
    jQuery('#post_category_ids').select2();
  } 
);

// app/javascript/packs/quill.js
import Quill from 'quill';
document.addEventListener(
  'turbolinks:load', function() {
    var quill = new Quill('#editor', {
      modules: {
        toolbar: true
      },
      theme: 'snow'
    });

    quill.on('text-change', function(delta, oldDelta, source) {
      $('#editorable').val(quill.container.firstChild.innerHTML);
    });
  }
);

The addEventListener in quill.js is not firing. I can get quill editor working only on hard reload. If I place all the code inside the addEvenlistener in application.js then quill loads just fine without hard refresh.

How to solve this?

Answer 1

Solved the problem. I was using javascript_pack_tag helper in _form.html.erb. It seems 'turbolinks:load' is not available there. I moved the javascript_pack_tag helper to application.html.erb

# app/views/layouts/application.html.erb
<%= javascript_pack_tag 'quill', 'data-turbolinks-track': 'reload' if action_name == "edit" %>

...and everything works as expected.