jQuery-Ui不在webpack中吗？

Question

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

我正在尝试使jQuery-ui'tabs'（或任何jquery-ui函数）起作用。问题似乎是jquery-ui某种程度上无法加载。

我收到以下错误消息：

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

我正在使用导轨6，该导轨使用纱线和卷筒纸。我也在使用jQuery和bootstrap。实际上是一个非常常见的组合。

来自纱线完整性文件：

 "topLevelPatterns": [
    "@rails/actioncable@^6.0.0",
    "@rails/ujs@^6.0.0",
    "@rails/[email protected]",
    "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"

我的application.js：

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

HTML和js基本上是从官方参考文献中复制的：https://jqueryui.com/tabs/

我（不是这样）自定义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>  

当显示页面时，我得到：Uncaught TypeError：$（...）。tabs不是一个函数

很明显，jquery-ui不会以某种方式加载。

我已经尝试过为jquery-ui引用cdn url，我已经尝试过使用其不同版本的各种变体...

不走运。

我意识到类似的发音问题被问了100遍，而我都用谷歌搜索。对于许多人来说，引用库的CDN版本是可行的。它不适合我，我也不想走那条路。

我做了研究，在我问到这里之前我已经尽力了，但是我对此没有运气。我之前使用jQuery-ui都没有问题。我怀疑这是webpack的问题-我尚未完全了解。这是我最好的猜测。

任何提示都值得赞赏

---

更新：添加我的package.json：

{
  "name": "jrm",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "^4.4.1",
    "jquery": "^3.5.0",
    "jquery-ui": "^1.12.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

Answer 1

已解决以下问题：

修改后的文件-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')

工作！