how to install easydropdown with Rails 6 - ruby-on-rails

Question

What is the correct way to install easydropdown into Rails 6?
I ran yarn add easydropdown to add it to my app. Seems ok; I verified that my browser sees it in the js sources.
After this, not totally sure what to do. In app/javascripts/packs/application.js, I've tried adding these lines. None cause errors.
require('easydropdown')
import easydropdown from 'easydropdown'
import Easydropdown from 'easydropdown' - does case matter?
But in my page and js console, I keep seeing easydropdown is not defined.
What am I missing?

Answer 1

When using webpack the require statements are not global so you need to require the library in the file in which you are using it.
In your application.js pack file add the following:
import easydropdown from 'easydropdown';
document.addEventListener("turbolinks:load", () => {
easydropdown('.easydropdown')
});
as long as your selects have class of "easydropdown" this should make them all work.
Your styles need to be added either in your assets or imported in this pack file as well.

Answer 2

Thanks to #ben-trewern for helping me get here.
For Rails 6, here's what works for me:
yarn add easydropdown to install it into your Rails App
Append loader code to app/javascripts/packs/application.js.
I've found 2 ways that work. I honestly don't know which is better or why.
Option 1: using import
import easydropdown from 'easydropdown';
window.easydropdown = easydropdown;
Option 2: using require
const easydropdown = require('easydropdown')
window.easydropdown = easydropdown.default
Now you can use easydropdown functions in your views (including <script> tags).
Bonus help: Are you using Stimulus JS?
If your dropdown is connected to a Stimulus controller, here's some tips:
I found that I still had to assign window.easydropdown (above) in order to call EDD in my controller code.
Seems the most straightforward thing to do is to call easydropdown.select('#my-select') in my Stimulus controller's initialize() method, e.g.
export default class extends Controller {
static targets = [...]
initialize() {
easydropdown.select('#region-switcher`);
...
}
...