Webpacker: A node modules (flatpickr.js) works in development but not in production

[salex]

I'll start with: DHH should never have released Webpacker in Rails 6 with out a least a decent rails guide that outlined what you have to do (and learn!) to get this stuff working! I've spent the last two months in Rails/Webpacker hell. I didn't have a lot of javascript (coffeescript), just some hide/show stuff, a few ajax calls, and some what I'll call spreadsheet pages, where changing something did some calculation, populated a few field and validated the changes (think general ledger where debits and credits must balance).

• I started trying to upgrade an existing app to rails 6. Unfortunately it included jQuery and ZURB Foundation. Could only get 90% of it working. Reverted to asset pipeline for foundation and got about 98% working and ran into the typical TurboLinks problems. Zurb's response was basically "Mixing frameworks is usually not a good idea". Disabling Webpacker just got me back to a rails 5.3 application.

• After several other attempts I gave up and started with a new Rails 6 application, no jQuery, no mixed css/javascript frameworks (used w3.css, it had about all I needed). It took a lot of confusing days and nights, but I started to get the hang of it. Discovered Stimulus (also poorly documented). I needed a date picker to replace jQuery's datepicker and picked Datepickr. Got it working fairly quickly, first as a simple data-behavior='flatpickr' (from GoRails) and then using stimulus. All was fine until I tried to deploy it to a staging server (with Capistrano). All my stimulus controllers were working, except datepickr.

I'm now stuck in that I have no idea what to try or where to look for help to solve the problem.

What should happen:

Datepickr should bring up a calendar in any input text-field I added the data-behavior if I clicked on it.

What happens

Datepicker loads! I can see the calendar div using web inspector. I get console messages I put in. The text-field is readonly, the calendar is just not displayed. There are no javascript errors, it just is not there. Again, it works fine in development.

I tried to see if there was a problem in the Capistrano deploy and ran production on my Mac Book Air with:

RAILS_ENV=production bin/rails assets:precompile
RAILS_SERVE_STATIC_FILES=true bin/rails s -e production

Again everything worked except flatpickr.

That leads me to the conclusion is that the problem is either with flatpickr or webpacker. I'll start with you and reference it on the datepickr site.

My pack/application.js file using the GoRails example where it is in application.js.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import flatpickr from "flatpickr"
require("flatpickr/dist/flatpickr.css")

document.addEventListener("turbolinks:load", () => {
  flatpickr("[data-controller='flatpickr']", {
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
  })
})

import "controllers"

It uses data-controller instead of data-behavior in that I set all my dates to use stimulus, but disabled the controller for this latest attempt.

That's all there is! Works in development but not staging/production. Could it be my old enemy TurboLinks?

[salex]

I put up a bare bones demo app to help me with debugging.

It appears that the statement require("flatpickr/dist/flatpickr.css") in packs/application.js is not picked up in bin/rails assets:precompile. Without a lot of css (just scaffold) the flatpickr calendar is actually there, but with no styling.

Did I miss a step somewhere? If I did point it out to me.

[salex]

I found the problem ,mine, but not sure where in the last few months of hell that I remembered that if you serve css out of webpacker, you have to have a

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

in addition to the assets pipeline.

If someone reads this, you can close it, maybe something to add to some documentation in the future.

I guess I did not RTFD, because it is in webpacker's readme doc under CSS/SCSS. The documentation I talked about was a guide - more rails oriented that javascript oriented.