Rails 6 - Javascript：未捕获的 ReferenceError：未定义 Quill答案

【问题标题】：Rails 6 - Javascript: Uncaught ReferenceError: Quill is not definedRails 6 - Javascript：未捕获的 ReferenceError：未定义 Quill
【发布时间】：2019-10-05 05:55:23
【问题描述】：

我正在尝试设置 Quill on Rails 6 应用程序。当我将 js 文件放在 html 中时，它可以工作，它看起来像这样： 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>

但是，当我尝试运行本地 js 文件时，它给了我一个错误

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

这是我的 application.js 文件

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

这是我的 editor.js 文件

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

而 quilljs 是整个库文件。

我的 application.html.erb 也有这个标签

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

两个 js 文件都会加载，因为我可以看到我在控制台中设置的 console.log 值。我不确定我做错了什么，似乎没有人遇到过类似的问题。

【问题讨论】：

你使用webpacker，还是普通的资产管道（没有webpacker）？

标签： javascript ruby-on-rails quill ruby-on-rails-6

【解决方案1】：

在创建 Quill 实例之前，您可能只需要等待 DOM 加载。这个问题是去年提出的，所以希望你已经找到了解决方案。如果没有，你可以试试这样的：

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

如果您或其他人有兴趣，我写了一篇关于我最近添加QuillJS to Rails 6 的经验的博客文章，这可能会有用。诚然，这篇文章没有详细介绍这个特定问题，但代码 sn-ps 确实解决了这个问题，并且可以为更一般的配置提供更多帮助。

【讨论】：

【解决方案2】：

你的asset.rb有吗？

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

【讨论】：

我认为 Rails 6 不需要这样做