Cómo usar JQueryUI en vistas en Rails 6

Question

Tengo dificultades para usar JQuery y JQueryUI en una aplicación Rails 6.

JQuery y JqueryUI funcionan en application.js

SIN EMBARGO, JQueryUI no funciona en las vistas. ¿Cómo lo hago funcionar en ambos casos? Mi código está abajo.

Yo corrí yarn add jquery

Yo corrí yarn add jquery-ui-dist

En 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

En application.js :

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

Pruebo JQuery y JQueryUI en un / scripts.js personalizado y en packs / search.js

custom / scripts.js se carga en application.js y tiene este aspecto:

$(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 se carga en la vista con

<%= javascript_pack_tag "search" %>

packs / search.js se ve así (exactamente igual que 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);
});

El resultado en la consola:

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

Answer 1

El problema quizás sea cómo Webpack resuelve el complemento. He eliminado esta línea

 $: 'jquery'

en environment.jsy parece gustos Así funciona!