Flatpickr doesn't load on prod (Heroku) but does in dev

Question

My flatpickr isn't loading on production (hosted on Heroku) but is working correctly on development and by running heroku local.

I believe the style is not being picked up on Heroku, since I don't get any error message either on the heroku logs but only these big arrows and digits on my page: flatpicker not loading

My flatpicker.js file: (imported in application.js with import '../plugins/flatpickr';

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

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

Application.js is loaded in my application.html.erb with <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>

(also tried without defer: true)

I am using Rails 6 and Ruby 2.6.5.

Thanks a lot!

Answer 1

Add this to your application.html.erb file

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