$.widget is not a function in ra.filtering-multiselect.source.js

[gabrieletassoni]

Today, during development, I think after a bundle update, Chrome's console started to throw this error:

JQMIGRATE: Migrate is installed, version 3.3.3-pre
ra.filtering-multiselect.source.js:13 Uncaught TypeError: $.widget is not a function
    at ra.filtering-multiselect.source.js:13
    at ra.filtering-multiselect.source.js:331
(anonymous) @ ra.filtering-multiselect.source.js:13
(anonymous) @ ra.filtering-multiselect.source.js:331
(index):36 Uncaught ReferenceError: RailsAdmin is not defined
    at (index):36
(anonymous) @ (index):36
(index):258 Uncaught TypeError: $(...).dropdown is not a function
    at (index):258

Obviously all the other, custom, javascript in the page is not working anymore, what can be happened? How can I have the javascript working again?

Here is the bundle:

$ bundle
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching source index from https://gems.bancolini.com/
Fetching source index from https://gems.bancolini.com/
Fetching gem metadata from https://rubygems.org/..........
Fetching source index from https://rubygems.org/
Resolving dependencies....
Using rake 13.0.6
Using concurrent-ruby 1.1.9
Using i18n 1.8.10
Using minitest 5.14.4
Using thread_safe 0.3.6
Using tzinfo 1.2.9
Using zeitwerk 2.4.2
Using activesupport 6.0.4
Using builder 3.2.4
Using erubi 1.10.0
Using mini_portile2 2.5.3
Using racc 1.5.2
Using nokogiri 1.11.7 (x86_64-linux)
Using rails-dom-testing 2.0.3
Using crass 1.0.6
Using loofah 2.10.0
Using rails-html-sanitizer 1.3.0
Using actionview 6.0.4
Using rack 2.2.3
Using rack-test 1.1.0
Using actionpack 6.0.4
Using nio4r 2.5.7
Using websocket-extensions 0.1.5
Using websocket-driver 0.7.5
Using actioncable 6.0.4
Using globalid 0.4.2
Using activejob 6.0.4
Using activemodel 6.0.4
Using activerecord 6.0.4
Using marcel 1.0.1
Using activestorage 6.0.4
Using mini_mime 1.1.0
Using mail 2.7.1
Using actionmailbox 6.0.4
Using actionmailer 6.0.4
Using actiontext 6.0.4
Using activemodel-serializers-xml 1.0.2
Using pg 1.2.3
Using activerecord-hierarchical_query 1.3.0
Using activerecord-nulldb-adapter 0.7.0
Using public_suffix 4.0.6
Using addressable 2.8.0
Using smart_kv 0.2.8.1
Using apexcharts 0.1.10
Using execjs 2.8.1
Using autoprefixer-rails 10.2.5.1
Using bcrypt 3.1.16
Using bindex 0.8.1
Using msgpack 1.4.2
Using bootsnap 1.7.6
Using ffi 1.15.3
Using sassc 2.4.0
Using bootstrap-sass 3.4.1
Using bundler 2.1.4
Using byebug 11.1.3
Using native-package-installer 1.1.1
Using pkg-config 1.4.6
Using matrix 0.4.2
Using red-colors 0.3.0
Using cairo 1.17.5
Using glib2 3.4.6
Using cairo-gobject 3.4.6
Using cancancan 3.3.0
Using regexp_parser 2.1.1
Using xpath 3.2.0
Using capybara 3.35.3
Using childprocess 3.0.0
Using choice 0.2.0
Using coffee-script-source 1.12.2
Using coffee-script 2.4.1
Using method_source 1.0.0
Using thor 1.1.0
Using railties 6.0.4
Using coffee-rails 5.0.0
Using connection_pool 2.2.5
Using deep_merge 1.2.1
Using orm_adapter 0.5.0
Using responders 3.0.1
Using warden 1.2.9
Using devise 4.8.0
Using devise-i18n 1.10.0
Using e2mmap 0.1.0
Using et-orbi 1.2.4
Using raabro 1.4.0
Using fugit 1.5.0
Using gobject-introspection 3.4.6
Using gio2 3.4.6
Using groupdate 5.2.2
Using temple 0.8.2
Using tilt 2.0.10
Using haml 5.2.1
Using http_accept_language 2.1.1
Using mini_magick 4.11.0
Using ruby-vips 2.1.2
Using image_processing 1.12.1
Using jbuilder 2.11.2
Using jquery-rails 4.4.0
Using jquery-ui-rails 6.0.1
Using jwt 2.2.3
Using kaminari-core 1.2.1
Using kaminari-actionview 1.2.1
Using kaminari-activerecord 1.2.1
Using kaminari 1.2.1
Using rb-fsevent 0.11.0
Using rb-inotify 0.10.1
Using listen 3.6.0
Using multi_json 1.15.0
Using rack-cors 1.1.1
Using ransack 2.4.2
Using simple_command 0.1.0
Using rails-i18n 6.0.0
Using rails_admin_settings 1.7.0
Using rubyzip 2.3.2
Using roo 2.8.3
Using ruby-ole 1.2.12.2
Using spreadsheet 1.2.9
Using roo-xls 1.2.0
Using sprockets 4.0.2
Using sprockets-rails 3.2.2
Using rails 6.0.4
Using thecore_auth_commons 2.3.9
Using thecore_backend_commons 2.3.4
Using model_driven_api 2.4.0
Using nested_form 0.3.2
Using rack-pjax 1.1.0
Using remotipart 1.4.4
Using sassc-rails 2.1.2
Using rails_admin 2.2.0
Using rails_admin-i18n 1.16.1
Using rails_admin_rollincode 1.3
Using selectize-rails 0.12.6
Using rails_admin_selectize 2.0.8
Using rails_admin_toggleable 0.8.3
Using safe_yaml 1.0.5
Using poppler 3.4.6
Using serviceworker-rails 0.6.0
Using redis 4.3.1
Using sidekiq 6.2.1
Using sidekiq-failures 1.0.0
Using rufus-scheduler 3.8.0
Using thwait 0.2.0
Using sidekiq-scheduler 3.1.0
Using thecore_background_jobs 2.0.7
Using thecore_ui_commons 2.3.7
Using thecore_ui_rails_admin 2.4.1 from source at `../dependencies/thecore/thecore_ui_rails_admin`
Using thecore_spot_items_common 2.1.0
Using thecore_spot_projects_common 2.1.3
Using thecore_spot_suppliers 2.0.2 from source at `../dependencies/spot/thecore_spot_suppliers`
Using spot_delivery_commons 0.1.5 from source at `../dependencies/spot/spot_delivery_commons`
Using spot_employee_commons 0.1.5 from source at `../dependencies/spot/spot_employee_commons`
Using thecore_spot_items_importer 2.1.0
Using thecore_spot_locations_common 2.1.1 from source at `../dependencies/spot/thecore_spot_locations_common`
Using spot_delivery_receipts 0.1.11 from source at `../dependencies/spot/spot_delivery_receipts`
Using spot_delivery_shipments 0.1.6 from source at `../dependencies/spot/spot_delivery_shipments`
Using zpl_print 0.1.2 from source at `../dependencies/spot/zpl_print`
Using mydeli_models 0.1.2 from source at `../dependencies/spot/mydeli_models`
Using puma 4.3.8
Using rack-proxy 0.7.0
Using rexml 3.2.5
Using ruby-graphviz 1.2.5
Using rails-erd 1.6.1
Using sass-rails 6.0.0
Using selenium-webdriver 3.142.7
Using spring 2.1.1
Using spring-watcher-listen 2.0.1
Using thecore_spot_overrides 2.0.9
Using turbolinks-source 5.2.0
Using turbolinks 5.2.1
Using web-console 4.1.0
Using webdrivers 4.6.0
Using webpacker 4.3.0
Bundle complete! 28 Gemfile dependencies, 171 gems now installed.
Bundled gems are installed into `./vendor/bundle`

Thank you very much.

[mshibuya]

I have no idea, can you reproduce this by using a newly generated rails app?

[gabrieletassoni]

Hi, thanks for the answer, no, on a newly generated app I cannot reproduce it. But if I use a wrapper gem I created, it does not work. I try to explain better: I think the point lies around the fact I use rails_admin gem in another gem I created (https://github.com/gabrieletassoni/thecore_ui_rails_admin) which I use as a collection of best practices I push in every project I start, and the main app's Gemfile includes my gem, not rails_admin directly. This dependency chain worked well for many years now and on many different projects, but since one month ago the console started to spit out that error after a

bundle update

I managed to silence off it by removing

//= require rails_admin/rails_admin

from my gem's app/assets/javascripts/thecore_ui_rails_admin/thecore_rails_admin.js, but this obviously has the problem of not loading rails admin specific javascripts at all. As soon as I add the //= require rails_admin/rails_admin again, the error is thrown again and no javascript in the page works anymore.

I tried to give a glance on rails_admin code of commits around that time, but I'm unable to find what has changed.

Thanks

[gabrieletassoni]

Ok, I'm resolving by adhering to the standard, I have had a lot of overridden layouts and partials, one of them enabling packs and this seems to conflict with rails_admin javascript management. Can't see the time to have railsadmin properly integrated with webpacker ^^

[xpopov]

Well, it seems that at least versions 3+ does not work with webpacker. Sample project of @gabrieletassoni seem to use sprockets, while original one (the one that has error) used webpacker. I've just added RailsAdmin to my Rails and webpacker project, and here's what I'm getting: filtering-multiselect.js:10 Uncaught TypeError: $.widget is not a function at filtering-multiselect.js:10:1 at ./node_modules/rails_admin/src/rails_admin/filtering-multiselect.js (filtering-multiselect.js:352:1) at __webpack_require__ (bootstrap:769:1) at fn (bootstrap:129:1) at ./node_modules/rails_admin/src/rails_admin/base.js (base.js:1:1) at __webpack_require__ (bootstrap:769:1) at fn (bootstrap:129:1) at ./app/javascript/packs/rails_admin.js (bootstrap:907:1) at __webpack_require__ (bootstrap:769:1) at fn (bootstrap:129:1)

You can easily trace error to line import "jquery-ui/ui/widget" that actually does not do anything. It should look like jQuery.widget = require("jquery-ui/ui/widget.js");