Como usar JQueryUI em visualizações no Rails 6

Question

Estou tendo dificuldade em usar JQuery e JQueryUI em um aplicativo Rails 6.

JQuery e JqueryUI funcionam em application.js

NO ENTANTO, JQueryUI não está funcionando em visualizações. Como faço para funcionar em ambos os casos? Meu código está abaixo.

Eu corri yarn add jquery

Eu corri yarn add jquery-ui-dist

Em 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

Em application.js :

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

Eu testo JQuery e JQueryUI em um custom / scripts.js e em packs / search.js

custom / scripts.js é carregado em application.js e se parece com isto:

$(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 é carregado na visualização com

<%= javascript_pack_tag "search" %>

packs / search.js se parece com isto (exatamente o mesmo 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);
});

O resultado no 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

Answer 1

O problema talvez seja como o Webpack resolve o plugin. Eu removi esta linha

 $: 'jquery'

em environment.jse parece que funciona!