jQuery -У меня нет в вебпаке? - PullRequest
Новая
       26

jQuery -У меня нет в вебпаке?

0 голосов
/ 24 апреля 2020

В моем приложении рельсы. похоже, что jQuery -ui загружается неправильно. Я пытался в течение двух дней, и я не понимаю, почему. Там могут быть похожие вопросы, но они не совпадают, и ни один из них не решает мою проблему. Это не может быть сложно, но я не понимаю.

Я пытаюсь заставить работать jQuery -ui 'tabs' (или любую функцию jquery -ui). Кажется, проблема в том, что jquery -ui как-то не загружается.

Я получаю следующее сообщение об ошибке: 

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

Я использую рельсы 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"

моего приложения. 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 как-то не загружается.

Я уже пытался ссылаться на URL-адрес cdn для jquery -ui, я пробовал все варианты с различными версиями ...

Не повезло.

Я понимаю, что подобные вопросы звучали 100 раз, и я их всех погуглил. Для многих ссылка на CDN-версию библиотеки работает. Это не для меня, и я не хочу go идти по этому пути.

Я провожу свои исследования и очень стараюсь, прежде чем спрашивать здесь, но мне не повезло с этим. Я использовал jQuery -ui раньше без проблем. Я подозреваю, что это проблема с веб-пакетом, который я до конца не понимаю. Это мое лучшее предположение.

Любая подсказка приветствуется

Обновление: добавление моего пакета. 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"
  }
}
...