如何在 Rails 6 项目中包含 jquery-ui？

Question

I'm using Rails 6.0.3.2 and jquery-ui 1.12.

Still can't make it work: Uncaught TypeError: $(...).datepicker is not a function

Tried:

I. Editing config/webpack/environment.js

Last version:

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
  "$":"jquery",
  "jQuery":"jquery",
  "window.jQuery":"jquery",
  Popper: ['popper.js', 'default']
  }))

II. Importing and requiring:

require( "jquery-ui/ui/widgets/datepicker" );

and

import "jquery-ui/ui/widgets/datepicker"

I know there's a lot of questions like mine. However, most of them are obsolete. Tried a million of combinations with the same answer: "NOT A FUNCTION"

Please, help with a working config and import/require instructions! Thanks in advance!

Answer 1

Finally I figured out how to make all that stuff work (I mean bootstrap, jquery-ui and else). I wish I would spent less than a half of day collecting the recipe by every little drop.

My config/webpack/environment.js :

const { environment } = require('@rails/webpacker')
//const { VueLoaderPlugin } = require('vue-loader')
//const vue = require('./loaders/vue')

//environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
//environment.loaders.prepend('vue', vue)
const webpack = require('webpack')

module.exports = environment

I commented out the Vue part in case you prefer smth else.

My application.js :

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

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
import * as datepicker from 'jquery-ui/ui/widgets/datepicker';

document.addEventListener("turbolinks:load", function() {
  if ($('#termsAcceptBtn').length) {
    $('#termsAcceptBtn').addEventListener("click", function() {
      $('#termsModal').modal('show');
    });
  }
});

$(document).on('turbolinks:load', function() {
  $("#user_birth").datepicker();
});

I hope it helps somebody to save a half a day.