So I am trying to setup selectize (https://selectize.dev) in my Rails 7 app, and while I had no luck automatically pin it, I now pinned it by directly pointing to source.
I then have created a little init script for a form field that I want to get selectized, but the console shows the following error:
Uncaught TypeError: Cannot set properties of undefined (setting 'Sifter') selectize.min.js:3
at selectize.min.js:3:149
at selectize.min.js:3:160
Not sure what’s wrong?
Here’s importmap.rb
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "trix"
pin "@rails/actiontext", to: "actiontext.js"
pin "jquery", preload: true # @3.6.0
pin "selectize", to: "https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"
pin "selectize-setup"
Here’s my init script (selectize-setup.js):
import "selectize";
jQuery(function () {
$(".format-select").selectize();
});
Here’s how I invoke the script in new.html.erb:
<h1>Add New Book</h1>
<%= javascript_import_module_tag("selectize-setup") %>
<%= render 'form', book: @book %>
I think there might be something wrong with jquery, however it is initialized in application.js and using $().jquery on the console gives the correct version.
application.js:
import "@hotwired/turbo-rails";
import "controllers";
import "trix";
import "@rails/actiontext";
import jQuery from "jquery";
window.jQuery = jQuery;
window.$ = jQuery;