Uncaught ReferenceError: Clipboard is not defined: when using clipboard.js with Rails 6

Posted 2023-05-08

【中文标题】Uncaught ReferenceError: Clipboard is not defined: when using clipboard.js with Rails 6

【英文标题】：

【发布时间】：2021-08-17 17:55:40

【问题描述】：

我正在尝试在我的 Rails 6 应用程序中使用“clipboard.js”将当前位置复制到剪贴板，以便用户粘贴到电子邮件中。我的第一次尝试是使用“clipboard-rails”，但没有成功，所以手动尝试了。

app/views/layouts/application.html.erb:-
----------------------------------------
<%= javascript_pack_tag 'clipboard', 'data-turbolinks-track': 'reload' %>



app/javascript/packs/application.js:-
-------------------------------------
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("packs/clipboard")

var clipboard = new Clipboard('.clipboard-btn');

clipboard.on('success', function(e) 
    console.log(e);
);

clipboard.on('error', function(e) 
    console.log(e);
);


import "bootstrap"




app/views/bundles/show.html.erb:-
---------------------------------
<p class="link" id="bar"><%= "#request.protocol#request.host_with_port#request.fullpath" %></p>
<button class="clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#bar">
    Copy to clipboard
</button>

我在浏览器控制台中不断收到 'Uncaught ReferenceError: Clipboard is not defined' 错误，并且按下按钮什么也没做。我试过“剪贴板”和“剪贴板JS”。我正在 Windows 10 上开发。

【参考方案1】：

您可能必须将要求分配给剪贴板：

    const Clipboard = require("packs/clipboard");
    var clipboard = new Clipboard('.clipboard-btn');

【讨论】：

谢谢，它让我更进一步，但我又遇到了另一个错误。 clipboard.js:474 未捕获的类型错误：无法读取 null 的属性“addEventListener”

如果你能展示你的整个代码会更容易提供帮助。

并非如此。由于我提出了查询，我随后发现我不需要“application.html.erb”中的“javascript_include_tag”。 Gemfile 中的代码是完整的，除了已删除的 cmets。 'bundles/show.html.erb' 中唯一没有显示的代码是一个表格。

我找到了一个有用的答案here。