Installing in Rails 5 or 6?

[gbirchmeier]

I apologize for submitting a help request as a Git issue, but I did not see any other place to ask.

Has anyone used this with Rails 5 or 6? I'm attempting to install it into my Rails 6 app, but I'm not able to make it work.

• I've used yarn add easydropdown to install it, and verified that it's in my asset pipeline.

• I added import easydropdown from 'easydropdown' to app/javascripts/packs/application.js. No notable errors there.

But in my page, the easydropdown var is not defined. I suspect I'm missing something dumb, but I'm not JS-savvy enough to know what it is.

NOTE: I also threw a question up on StackOverflow.

[gbirchmeier]

@brandoniffert I saw that you are using easydropdown with webpack (from #79). Does that mean you're using Rails? Might you be able to advise?

[brandoniffert]

@gbirchmeier I haven't used Rails in awhile but have you tried requiring it and defining it in the script you are using it?

const easydropdown  = require('easydropdown')
const customDropdown = easydropdown('select')

[gbirchmeier]

I get require is not defined, because I guess require is part of some RequireJS library that is not loaded in views?

I'm kind of hoping some rails ninja will pop in and tell me the proper "Railsy" way to do this. Webpack's the official Rails 6 loader now, so it should be pretty mature, right? Seems like it shouldn't require any elaborate tricks to load a fricking library...

[btrewern]

import easydropdown from 'easydropdown';

document.addEventListener("turbolinks:load", () => {
  easydropdown('select')
});

This should get you started.

[patrickkunka]

Hi all - thanks for the constructive suggestions so far.

It sounds like this may be a scoping issue:

I added import easydropdown from 'easydropdown' to app/javascripts/packs/application.js. No notable errors there.
But in my page, the easydropdown var is not defined. I suspect I'm missing something dumb, but I'm not JS-savvy enough to know what it is.

If you are using import then you are importing easydropdown with "module" scoping - not "global" scoping. You mention that the the var is not defined in your "page" - this sounds like you are expecting it to be defined globally on the window, which it will not be if you are importing it as a module.

I would recommend writing any custom or rails specific JS, directly after your import statement - just as @btrewern has suggested, so that is in the same module.

[gbirchmeier]

Thanks @btrewern for helping me get past this.

(The following answer is also posted to SO.)

For Rails 6, here's what works for me:

1. yarn add easydropdown to install it into your Rails App

2. 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
   

3. 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`);
    ...
  }
  ...