Help using stimulus-flatpickr in a importmap app

1

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.

2

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
3

I’m here a year later trying to figure out how to do this. :sweat_smile:

I’m a little picky though and I’m wishing to serve it locally via bin/importmap --save, but doing that results in tons of 404 errors from the Rails Asset Pipeline.

I know this is an old thread so apologies for that, but since this is a top Google result I thought I’d bump the thread in hopes that someone will see it.

4

I might of made a small change since I wrote this, but this is what is in my config/importmap.rb and it is still working

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

Don’t know about using bin/importmap.

5

Yeah it’s not going to work unless you pin it to the CDN which is kind of really annoying. I’m doing that now to “fix” this but relying on a third party CDN for assets is not the way I’d hoped to do things.

6

You can do bin/importmap stimulus-flatpickr --download and they will download to the vendor/javascript folder, without relying on a cdn.

However, since stimulus is a dependency of stimulus-flatpickr, it will be duplicated in importmap.rb and vendor/javascript. You will need to remove the duplicate stimulus in both parts.