How to use JQueryUI in views in Rails 6

问题

I am having difficulty using JQuery and JQueryUI in a Rails 6 app.

JQuery and JqueryUI both work in application.js

HOWEVER, JQueryUI is not working in views. How do I make it work in both cases? My code is below.

I ran yarn add jquery

I ran yarn add jquery-ui-dist

In environment.js:

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

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
);

const aliasConfig = { 'jquery': 'jquery/src/jquery', 'jquery-ui': 'jquery-ui-dist/jquery-ui.js' };
environment.config.set('resolve.alias', aliasConfig);

module.exports = environment

In application.js:

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("jquery-ui");
require("custom/scripts")

I test out JQuery and JQueryUI in a custom/scripts.js and in packs/search.js

custom/scripts.js is loaded in application.js and looks like this:

$(document).ready(function(){
  var test = $().jquery
  console.log('custom/scripts.js JQuery version ==> ' + test);

  var test_ui = $.ui ? $.ui.version || "pre 1.6" : 'jQuery-UI not detected';
  console.log('custom/scripts.js UI version ==> ' + test_ui);
});

packs/search.js is loaded in the view with

<%= javascript_pack_tag "search" %>

packs/search.js looks like this (exact same as custom/scripts.js):

$(document).ready(function(){
  var test = $().jquery
  console.log('packs/search.js JQuery version ==> ' + test);
  
  var test_ui = $.ui ? $.ui.version || "pre 1.6" : 'jQuery-UI not detected';
  console.log('packs/search.js UI version ==> ' + test_ui);
});

The result in the console:

custom/scripts.js JQuery version ==> 3.5.1
custom/scripts.js UI version ==> 1.12.1
packs/search.js JQuery version ==> 3.5.1
packs/search.js UI version ==> jQuery-UI not detected

回答1:

The problem is maybe how Webpack resolves the plugin. I have removed this line

 $: 'jquery'

in environment.js and seem likes it works!

来源：https://stackoverflow.com/questions/65131308/how-to-use-jqueryui-in-views-in-rails-6

标签

jquery

ruby-on-rails

jquery-ui