Can't get flatpickr to work in production/staging environment.

[salex]

Probably not your fault, but you seem to understand this stuff better that I do and maybe you can point me in the right direction. I don't do a lot of java/coffee script, enough to get by. I tried to modernize an app and more or less started from scratch with rails 6, web packer, no jQuery. Also had to ditch ZurbFoundation since it required jquery and soon found out that mixing frameworks caused problems (used w3.css instead). Got most things working after finding stimulus. I even got Flatpickr working without stimulus - in development, just using the data-behavior approach.

I was ready to show someone and set up a staging server. Everything worked except for flatpickr. I get a console log msg that it fired, but any date fields do not show the calendar. The field in not enterable, there are no javascript error. I then used your approach of putting putting it under stimulus, and got the same results. This is deployed with Capistrano and even though webpacker says staging environment will default to production, I added that to see if it had any affect.

My stimulus control is a stripped down version on one of your examples. Webpacker has been a tedious journey, you can do things different way and there is no real documentation or good examples on getting it all working. Here is the controller and again, work fine in development.

import Flatpickr from "stimulus-flatpickr";
console.log("entering picker")

import { Application } from 'stimulus'

import { definitionsFromContext } from 'stimulus/webpack-helpers'
const application = Application.start()
const context = require.context('../controllers', true, /\.js$/)
application.load(definitionsFromContext(context))

// Manually register Flatpickr as a stimulus controller
application.register('flatpickr', Flatpickr)

// import a theme (could be in your main CSS entry too...)
import "flatpickr/dist/flatpickr.css";

export default class extends Flatpickr {

  initialize() {
     //global options
    console.log("got a picker")
    this.config = {
      altInput: true,
      altFormat: "F j, Y",
      dateFormat: "Y-m-d"
    }
    super.connect();
  }
}

I guess it could be my old enemy TurboLinks - I usually had to disable it with Foundation. With no errors, I really don't know where to look.

[adrienpoly]

Turbolinks shouldn’t be an issue with Stimulus

Do you see your console log ‘entering picker’

I am not very familiar with Capistrano, I deploy mostly with Heroku. If you take this app and try to deploy it with Cap does it work?

One thing that I remember from a rare deploy with Cap does your server has node installed? Webpacker require node to build the assets. Or do you build them locally before deploying?

[salex]

Yes I see the 'entering picker', never the 'got a picker' in production. The server does have node, but I ruled out Capistrono.

I ran the app on my laptop in production with

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

Same problem. I created a new issue on webpacker and referenced flatpickr. It's one of the two and pretty sure it's webpacker, but have no idea what it could be.

Thanks for responding

[salex]

Just a little update.

I could not get stimulus-flatpicker to work consitantly in deploying to a staging server so I added a comment to a web packer issue rails/webpacker#2552 (comment)

I don't see anything in your documentation mentions anything about how flatpickr css get added to the assets.complile action or that you have to add a stylesheet_pack_tag. I fixed it, but don't know why it would work in one application and not another.

Whoops, I forgot that stimulus_flatpicker is used in other applications, not just rails so you would not necessarily add rails specific documentation