I am trying to move away from yarn, npm and webpacker to importmaps. I clearly did a lot of things right cause some of my JavaScript is loading. Some of my Stimulus controllers are not being recognized though.
ran ./bin/importmap json in my terminal, here is the return:
"imports": {
"application": "/assets/application-2d43ef5e34aba7b5abe55812b92a9410749e4dce11c405237afb2c1675a1c270.js",
"@hotwired/turbo-rails": "/assets/turbo.min-dfd93b3092d1d0ff56557294538d069bdbb28977d3987cb39bc0dd892f32fc57.js",
"@hotwired/stimulus": "/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
"mapbox-gl": "https://ga.jspm.io/npm:[email protected]/dist/mapbox-gl.js",
"process": "/assets/process-63d0fbfbe9e4e3a982b343a8cd7ce80e053323ae7a3909aeac51aa23d67075cf.js",
"@mapbox/mapbox-gl-geocoder": "https://ga.jspm.io/npm:@mapbox/[email protected]/lib/index.js",
"#lib/client.js": "https://ga.jspm.io/npm:@mapbox/[email protected]/lib/browser/browser-client.js",
"@mapbox/fusspot": "https://ga.jspm.io/npm:@mapbox/[email protected]/lib/index.js",
"@mapbox/mapbox-sdk": "https://ga.jspm.io/npm:@mapbox/[email protected]/index.js",
"@mapbox/mapbox-sdk/services/geocoding": "https://ga.jspm.io/npm:@mapbox/[email protected]/services/geocoding.js",
"@mapbox/parse-mapbox-token": "https://ga.jspm.io/npm:@mapbox/[email protected]/index.js",
"stimulus-flatpickr": "https://ga.jspm.io/npm:[email protected]/dist/index.m.js",
"flatpickr": "https://ga.jspm.io/npm:[email protected]/dist/flatpickr.js",
"stimulus-autocomplete": "https://ga.jspm.io/npm:[email protected]/src/autocomplete.js",
"sweetalert": "/assets/sweetalert/dist/sweetalert.min-eea95646addc5738b7543d6b0c4716fd6c5e5da863750f883f1cf7ba3b124531.js",
"@rails/actioncable": "/assets/@rails--actioncable-435923cff197d31fe3700dfe3f21fce805a19005cae1e215ac829798fbf236ac.js",
"star-rating.js": "/assets/star-rating.js/dist/star-rating.cjs-4722bbe0b7d9885ede2f515f095a5de5715d468fb6376ccbf0e73281ee7a2ecf.js",
"controllers/address_autocomplete_controller": "/assets/controllers/address_autocomplete_controller-8062b6979160f6de15dadbeca2e01b19d1770c7bdca0c6e82c85083fd955c362.js",
"controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
"controllers/brevo_controller": "/assets/controllers/brevo_controller-596c6ceac33e03aebecbfdd3139b914cd2f7e928c73d7228845b3031ab490e9a.js",
"controllers/cancel_subscription_controller": "/assets/controllers/cancel_subscription_controller-6cc32bcdfd9bc5198769b7f22edb74dde261d24a212f87c4007eb5db088ece4a.js",
"controllers/characteristics_filter_controller": "/assets/controllers/characteristics_filter_controller-bbb4ced2e89fd60fa89d3f8826a178fc3685912b8f7ea18bb528baa5f993216d.js",
"controllers/chat_subscription_controller": "/assets/controllers/chat_subscription_controller-37bccf2177f536e0a68dc0ad9b08737ea8380ccb586e219895410b6da2e36959.js",
"controllers/close_modal_controller": "/assets/controllers/close_modal_controller-7d8916fc0e2f9a1d506742e139a3a363f42649578ff58adf0e06bc734a8bf29b.js",
"controllers/conditional_user_fields_controller": "/assets/controllers/conditional_user_fields_controller-88d4d9e1f3498d2c8b5810c4123596966cf5cbcd7699ea92a2a42274e1beef3b.js",
"controllers/confirm_alert_controller": "/assets/controllers/confirm_alert_controller-07ec5ad780317808c9c128cbe462fa681b14f1463fcf7bd6eda22a708a99e549.js",
"controllers/display_info_window_controller": "/assets/controllers/display_info_window_controller-a7cf9bdbe9cfb542efd0700d71a04e681bbeb85f7268f67c9e2a159ca61f0181.js",
"controllers/dropdown_menu_controller": "/assets/controllers/dropdown_menu_controller-cfbde5df428e77d3e932930949ab6174440cef3312b2a8df8b0be1c64e665a7d.js",
"controllers/flatpickr_controller": "/assets/controllers/flatpickr_controller-8c07e789ca23776935e1af787e27bc89e9dd13641eff469be8a0a75d783a43fa.js",
"controllers/home_modal_controller": "/assets/controllers/home_modal_controller-33cab3a6dccbfd64ad4d2239f84f5c31f19a9ee3cb5d2397980b078091b21bb1.js",
"controllers/image_preview_controller": "/assets/controllers/image_preview_controller-2436f01561e67c2d9586fc00a4ace0d8601e67828690df29e197b5aa931d23f7.js",
"controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js",
"controllers/last_message_timestamp_controller": "/assets/controllers/last_message_timestamp_controller-fdac2ea7c0193898c159adc2a8c9db8516fcfdb5b2cc9d1aec6b65151d7dbdbf.js",
"controllers/map_controller": "/assets/controllers/map_controller-ae38ba1f038a0a8f29a06345d703ea3aad74f67e69529d6524d06fa845b1ac74.js",
"controllers/message_submit_controller": "/assets/controllers/message_submit_controller-f5a65696e0d007cf2d4350aa2e2d28077acbbe7b8521f745bd8b9cf4d0e889f5.js",
"controllers/plans_toggle_controller": "/assets/controllers/plans_toggle_controller-2121f285475e9672ae778840a17c92cf952a13988f60cfc6b6566f10f9d42292.js",
"controllers/skip_booking_date_validation_controller": "/assets/controllers/skip_booking_date_validation_controller-8bde39bf6c72836a50c57cbf47db6ba014c7ee9e02f45a72b73688db4ac2422e.js",
"controllers/star_rating_controller": "/assets/controllers/star_rating_controller-056a75297e17de043ad9a6472c6dcbd7cff1e7e6b02de45be77c315c49d102e3.js",
"controllers/timestamp_controller": "/assets/controllers/timestamp_controller-d60d74777b832955516fbe4d2b0f565fd81107d16834293e2d0c59d0ce9fa8f0.js",
"controllers/validate_form_controller": "/assets/controllers/validate_form_controller-ee3d578642a8456b12306288256d558a99dc562e00c2f2554b19c8be06681635.js"
}
}
One of them is throwing an error: address_autocomplete_controller.js - all the others work.
I am importing all my controllers through my app/javascript/controllers/index.js:
import { application } from "controllers/application"
// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)
Why would all controllers load but one? Any clues?
Error displayed in my console:
Failed to register controller: address-autocomplete (controllers/address_autocomplete_controller) TypeError: The specifier “suggestions” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.
Thanks for your help. This migration has been quite painful to be honest - if anyone has a good blog entry, I'd be a happy reader.
It turned out to be the version of importmap-rails not being compatible with the mapbox gem I was using and it had difficulties importing the suggestions module, so I had to use an older version of importmap. This is what I found:
Mapbox’s JavaScript ([email protected]) currently doesn’t play nice with importmap-rails version 2 😿 This is hopefully temporary, but for now:
# Gemfile
# replace this line:
gem "importmap-rails"
# With this:
gem "importmap-rails", "~> 1.2.3"