application.html.slim

/ app/views/layouts/application.html.slim

doctype html
html
  head
    meta charset="UTF-8"
    meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"
    title title
    = favicon_link_tag 'favicon.png'
    = csrf_meta_tags
    = action_cable_meta_tag
    = stylesheet_link_tag 'application', media: 'all'

    / Uncomment the next line if you import CSS in app/javascript/packs/application.js
    = stylesheet_pack_tag 'application'

  body
    = yield
    = javascript_include_tag 'application'
    = javascript_pack_tag 'application'

application.js

// app/javascript/packs/application.js
import "bootstrap";
import "../plugins/flatpickr";

environment.js

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')

// Bootstrap 3 has a dependency over jQuery:
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

module.exports = environment

flatpickr.js

// app/javascript/plugins/flatpickr.js
import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css";

flatpickr('.datepicker', {});

package.json

{
  "name": "name",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "3.4",
    "bootstrap": "3",
    "flatpickr": "^4.4.4",
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  }
}