如何在 RoR 中正确安装 select2（或 Chosen - 或者任何 JS？）？

Question

Rails beginner here: I have played around with Chosen and saw some posts that Select2 is the better option. However regardless of which one I am trying to use, I always run into the same error.

I have one of them in the Gemfile and run bundle install, and the gem is then present (I can run bundle info on it).

I then try to include the JS into app/javascript/packs/application.js like so:

require ("select2")

or

require ("chosen-jquery")

Whatever I do - my JS console says

Cannot find module 'select2'

(or chosen-jquery).

I am sure this is a super stupid oversight. I googled like crazy and searched here but could not find anything (which probably means even more that this is a stupid oversicht: :)

Any hint is highly welcomed. I probably don't understand how all this webpacker / JS stuff is working. Note btw that I WAS able to get easy-autocomplete (and jquery) via YARN and then I CAN actually require easy-autocomplete in application.js (and also the stylesheets in application.scss) via:

require("easy-autocomplete")

I don't quite get why this one is working and the other ones not?

Here is my full app/javascript/packs/application.js (including autocomplete):

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

require("jquery")
require("easy-autocomplete")

require("select2/dist/css/select2")


document.addEventListener("turbolinks:load", function() {
    var $input = $("[data-behaviour='autocomplete']")

    var options = {
        getValue: "name",
        url: function(phrase) {
            return "/search.json?q=" + phrase;
        },
        categories: [
            {
                listLocation: "movies",
                header: "<strong>Movies</strong>",
            },
            {
                listLocation: "actors",
                header: "<strong>Actors</strong>",
            },
            {
                listLocation: "actoraliases",
                header: "<strong>Actor Aliases</strong>",
            }
        ],
        list: {
            onChooseEvent: function() {
                var url = $input.getSelectedItemData().url
                $input.val("")
                Turbolinks.visit(url)
            }
        }
    }

    $input.easyAutocomplete(options)
})

document.addEventListener("turbolinks:load", function() {
    $('.selector').select2();
})

Thank you!

Answer 1

If you're using select-2-rails this is only for the Rails Asset Pipeline.

Try installing select2 via yarn (opposed to the ruby gem):

yarn install select2

In app/javascript/packs/application.js :

require("select2/dist/css/select2")

$(".content-search").select2();

// Side Note: when I moved this to a Stimulus Controller `import Select2 from "select2"` was needed.

In app/views/foos/_form.html.erb :

<%= form.label :foo_id %>
<%= form.collection_select(:foo_id, Foo.all, :id, :name, { include_blank: true }, class: "content-search") %>