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

Question

I'm trying to use 'clipboard.js' in my Rails 6 application to copy the current location to the clipboard for the user to paste into an email. My first attempt was to use 'clipboard-rails' but that didn't work so have tried manually.

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>

I keep getting 'Uncaught ReferenceError: Clipboard is not defined' error in the browser console and pressing the button does nothing. I've tried 'Clipboard' and 'ClipboardJS'. I'm developing on Windows 10.

Answer 1

You probably have to assign the require to Clipboard:

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