Hotwire Discussion

Help using stimulus-flatpickr in a importmap app

I’ve been toying with rails 7alpha2 to see what is it going to take to move my apps to Rails 7.

I’ve been using stimulus for a couple years. I don’t have a lot of controllers/js: some generic short controllers (toggle etc); a few larger spreadsheet/single page like controllers, and a couple open source controllers, mainly stimulus-flatpickr.

I got my test cases working with the esbuild option, but since I have so little js, I tried the importmap options. All my generic stimulus controllers worked fine, but I can’t get stimulus-flatpickr to register.

I posted an issue/help request on the stimulus-flatpickr GitHub page a few weeks ago, but no reply. Thought I try here (think Adrien hangs out here a little!).

Generating a new rails demo app using default importmap and --css=tailwind generates in import map:

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.js", preload: true
pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/stimulus@3.0.1/dist/stimulus.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

Adding stimulus-flatpickr with bin/importmap pin stimulus-flatpicke adds:

pin "stimulus-flatpickr", to: "https://ga.jspm.io/npm:stimulus-flatpickr@1.4.0/dist/index.js"
pin "flatpickr", to: "https://ga.jspm.io/npm:flatpickr@4.6.9/dist/flatpickr.js"
pin "stimulus", to: "https://ga.jspm.io/npm:stimulus@3.0.1/dist/stimulus.js"

to the importmap.

Adding a test page with a hello-controller works fine. Adding a date field with a data-flatpicker-controller does nothing since there is no flatpickr controller to autoload.

At this point there is no error (except for the TypeError: Module specifier, 'application' does not start with "/", "./", or "../". error).

Adding to the controllers index.js file

import Flatpickr from 'stimulus-flatpickr'
application.register('flatpickr', Flatpickr)

Does nothing in the flatpickr date filed but produces a Pause Reason in sources Exception with thrown value: SyntaxError: Importing binding name 'default' cannot be resolved by star export entries.

So I’m kind of lost. Certainly not a JS person so just looking for someone to expand my knowledge. If is something simple, probably still going to have the deal with the flatpickr css. Thanks in advance.

Well no help here or the stimulus-flatpickr site.

After pushing the car back up the hill to see if the brakes would still fail many more times, I read a note on stimulus-flatpickr site about stimulus 3.0. I though it was supported out of the box, but looking at the stimulus-use page, he had a note to use @beta to support stimulus 3.

I then tried bin/importmap pin stimulus-flatpickr@beta and after adding a <link rel="stylesheet" href="https://ga.jspm.io/npm:flatpickr@4.6.9/dist/flatpickr.min.css"> tag I got it to work.

1 Like