Search code examples
javascriptruby-on-railsruby-on-rails-7clipboard.jsimport-maps

How can I use clipboard.js with importmap in rails 7

I want to add a Copy to Clipboard button to my page in a Ruby on Rails 7 project.

config/importmap.rb:

pin "clipboard.js", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js", preload: true

app/javascript/application.js:

import { ClipboardJS } from "clipboard.js"

...

document.addEventListener('turbo:load', (event) => {
  new ClipboardJS('.js-clipboard', {
    text: function(trigger) {
      return trigger.getAttribute('data-clipboard-text')
    }
  })
})

But after page loads I get an error:

Uncaught SyntaxError: import not found: ClipboardJS
  • Rails 7.0.2.3
  • Ruby 3.0.2
Solution

  • Hi try to install clipboard by using the command

    bin/importmap pin clipboard

    Then instead of importing the module ClipboardJS by using import { ClipboardJS } from "clipboard.js", import just the class this way:

    import ClipboardJS from 'clipboard'

    Everything else is correct.