jQuery-Ui 没有包含在 webpack 中？

Question

在我的 rails 申请中。 jQuery-ui 似乎没有正确加载。我已经试了两天了，我不明白为什么。那里可能有类似的问题，但不完全相同， none 解决了我的问题。这不可能很复杂，但我不明白。

我正在尝试使 jQuery-ui 'tabs' 工作（或任何 jquery-ui 函数）。问题似乎是 jquery-ui 不知何故无法加载。

我收到以下错误消息：

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

我用的是rails6，它用到了yarn和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"

我的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>

当我显示页面时，我得到：未捕获的类型错误：$(...).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:

导入 required 模块

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

有效！

jQuery-Ui 没有包含在 webpack 中？

jQuery-Ui not included in webpack?

jquery-ui

webpack

ruby-on-rails-6

webpacker