Jquery ui 网页包中不包括jQuery Ui？

在我的rails应用程序中。jQuery ui似乎没有正确加载。我已经试了两天了，我不明白为什么。可能会有类似的问题，但不完全相同，没有一个能解决我的问题。这不可能很复杂，但我不明白

我正在尝试使jQueryUI“选项卡”工作（或任何jQueryUI功能）。问题似乎是jQueryUI不知何故无法加载

我收到以下错误消息：

Uncaught TypeError: $(...).tabs is not a function

我使用的是rails 6，它使用纱线和webpacker。我还使用jQuery和bootstrap。实际上，这是一个非常常见的组合

从纱线完整性文件：

 "topLevelPatterns": [
    "@rails/actioncable@^6.0.0",
    "@rails/ujs@^6.0.0",
    "@rails/webpacker@4.2.2",
    "bootstrap@^4.4.1",
    "jquery-ui@^1.12.1",
    "jquery@^3.5.0",
    "popper.js@^1.16.1",
    "turbolinks@^5.2.0",
    "webpack-dev-server@^3.10.3"

my application.js：

require("@rails/ujs").start()
require("turbolinks").start()
require("channels")
require("jquery")
require("jquery-ui")
require("bootstrap")

HTML和js基本上是从官方参考中复制的：

我的（并非如此）自定义js代码：

$( document ).ready(function() {
    $( "#tabs" ).tabs();
});

我的html：

<div id="tabs">

      <ul>
        <li><a href="#tab1">One</a></li>
        <li><a href="#tab2">One</a></li>
        <li><a href="#tab3">One</a></li>
      </ul>

      <div id="tab1">
        <%= render 'interviews/side_list'  %>
      </div>
      <div id="tab2">
        <%= render 'companies/embed_show' if @company %>
      </div>
      <div id="tab3">
        <%= render 'contacts/side_list' if @contacts %>
      </div>

</div>  

---

决定执行以下操作：

修改文件 -webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}));

module.exports = environment

从javascript/application/application.js文件中删除

import('jquery')

而是仅从jQuery ui导入所需的模块：

require('jquery-ui/ui/widgets/sortable')

工作

require('jquery-ui/ui/widgets/sortable')