Doesn't show Date flatpicker without error

[lrjbrual]

Hi, After trying couple of times. I would like to know how I can solve the issue. I'm using rails 6.1

I added the Stimulus reflex to my yarn: "stimulus": "^2.0.0", "stimulus-flatpickr": "^1.4.0", "stimulus_reflex": "^3.4.0", I also have a stimulus reflex due to some other functionality. now I added this to my index.js inside controller folder:

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
import StimulusReflex from 'stimulus_reflex'
import consumer from '../channels/consumer'

const application = Application.start()
const context = require.context("controllers", true, /_controller\.js$/)
application.load(definitionsFromContext(context))
StimulusReflex.initialize(application, { consumer })

// import Flatpickr
import Flatpickr from 'stimulus-flatpickr'

// Import style for flatpickr
require("flatpickr/dist/flatpickr.css")

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

Then I have a form of form_with: with the field of text_field:

        <%= invoice.text_field :departure_date__c,
              data: {
                controller: "flatpickr",
                flatpickr_min_date: Time.zone.now #disables past dates
              }, class:"form-control"
          %>

Then I when I tried to view there is not flatpickr:

Then is that possible to use instead of text_field, I can use date_field?

Thank you in advance

[lrjbrual]

I think I found issue that the stimulus flatpickr cannot see

Not sure how to resolve.

[adrienpoly]

Very strange Are you using Typescript ? which version of Webpacker do you have?

[lrjbrual]

Very strange Are you using Typescript ? which version of Webpacker do you have?

Yes true it is very strange. No I'm not using typescript. I just found out this error via VScode editor. this is the version: gem 'webpacker', '~> 5.0'

I tried also to create a new rails app. but the same result I cannot produce the error in the inspect or logs. only I found is in the VScode editor.

[adrienpoly]

Ok I can reproduce this warning, but I don't think this is the source of your issue here.

Can you confirm that in your yarn.lock you don't have any version 1.1.1 of stimulus still around ? I saw a few issues with lock files having both 1.1.1 and 2.0

The pack is correctly imported in your layout ?

[lrjbrual]

Ok I can reproduce this warning, but I don't think this is the source of your issue here.

Can you confirm that in your yarn.lock you don't have any version 1.1.1 of stimulus still around ? I saw a few issues with lock files having both 1.1.1 and 2.0

The pack is correctly imported in your layout ?

Hey. I don't have 1.1.1 I only have 2.0

then yes, I correctly imported in my layout: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

hmmp. not sure what is going on :) since I cannot find any other issue behind.

[adrienpoly]

Here is a simple demo app that shows a picker on the homepage in a simple input field https://github.com/adrienpoly/stimulus-flatpickr-rails61

This app is Rails 6.1, Webpacker 5+, Stimulus 2, StimulusReflex 3.4 so it should be similar to what you have

one thing you mention the stylesheet_link_tag (for the css) but do you have <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> for the JS?

[lrjbrual]

Yes I have that in the layouts too. I'm using webpack for this project for almost 1year.

I want to add this stimulus flatpickr because the date type in Safari does not work. I think this is the best solution but quite stock now. even the logs did not show me any problem, weird.

[adrienpoly]

Are you sure your html generated by the form helper is correct and has the correct data attribute ?

can you try to past this simple field to test

<input type="text" data-controller="flatpickr">

[lrjbrual]

@adrienpoly Yes I am pretty sure. here is the screenshot:

[adrienpoly]

It really looks like Stimulus controllers are not started. Do you have other Stimulus controllers?

can you add a console log at the end like that to confirm that the application is correctly started

// import Flatpickr
import Flatpickr from 'stimulus-flatpickr'

// Import style for flatpickr
require("flatpickr/dist/flatpickr.css")

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

[lrjbrual]

Hmmp. it doesn't show the log either: seems the stimulus is not started. strange I did the same with my other project to run stimulus and reflex, but I did the same.

Do you have any idea how to fix this?

Thanks in advance.

[adrienpoly]

A possibility is that you don't import this file in your main pack

assuming the file is javascript/controllers/index.js

in javascript/packs/application.js you should have import "controllers"

[lrjbrual]

A possibility is that you don't import this file in your main pack

assuming the file is javascript/controllers/index.js

in javascript/packs/application.js you should have import "controllers"

Thanks. I saw that I accidentally commented it, because of the issue on the old upgrade using compilation. now it is working. thanks again for the help.

I will close now this one. seems it is my fault. Thank you