Rails 6 - Javascript: Uncaught ReferenceError: Quill is not defined

Question

I am trying to set up Quill on Rails 6 app. When I put js files in html it works, it looks like these: new.html.erb

<div id="editor">
  <p>Hello World!</p>
</div>

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

However, when I try to run local js files, it gives me an error

Uncaught ReferenceError: Quill is not defined
    at Object../app/javascript/src/editor.js (editor.js:1)

Here is my application.js file

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("src/quill.js")
require("src/editor.js")

Here is my editor.js file

var quill = new Quill('#editor', {
      theme: 'snow'
    });

and quilljs is the whole library file.

my application.html.erb has this tag as well

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Both js files do load, because I can see the console.log value that I set up in console. I am not sure what I am doing wrong and it seems like no one had similar problems.

Answer 1

Do your asset.rb have it?

Rails.application.config.assets.precompile += %w( application.js )

Answer 2

You probably just to have to wait for the DOM to load before creating an instance of Quill. This question was asked last year, so hopefully you've found a solution already. If not, you could try something like this:

document.addEventListener("DOMContentLoaded", function (event) {
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
});

In case you or anyone else is interested, I wrote a blog post about my experience adding QuillJS to Rails 6 recently which could be of use. The post admittedly doesn't go into detail about this particular problem but the code snippets do solve it and could provide more help with configuration more generally.