rails6でTag-itを導入したい

Question

Tag-itを使ってタグ付機能のUIを整えたいのですが導入の仕方がわかりません。rails6でのJavascriptファイルの扱いがいまいち理解できておらず、うまく導入することができません。
いろいろ調べてみたのですがrails5までの情報ばかりであまり参考にできませんでした。
webpackerの理解も浅く勉強不足と言われても返す言葉もございませんが、どうかご教授いただけませんでしょうか。

##やってみたこと
調べた内容を元に手探りでやってみたのですが、勉強不足ゆえ的外れなことをしているかもしれません。間違っていることなどありましたらご指摘いただけると幸いです。

jquery-uiが必要とのことなのでgemfileに追記。

.
.
gem 'jquery-rails'
gem 'jquery-ui-rails'

jquery等のバージョンは以下の通りです。

{
  "name": "アプリ名",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "jquery-ui-dist": "^1.12.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

　

Tag-it と jQuery UI を読み込むように application.js と application.css に追記。

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery-ui")
require("tag-it")
import "bootstrap";
import '../stylesheets/application';
import '@fortawesome/fontawesome-free/js/all';

app/assets/stylesheets/application.scss

 *= require_tree .
 *= require jquery.tagit
 *= require tagit.ui-zendesk
 *= require_self

app/assets/stylesheersにダウンロードしたjquery.tagit.cssとtagit.ui-zendesk.cssを、
app/javascript/packsにダウンロードしたtags.jsを置きました。

./app
├── assets
│   └── stylesheets
│       ├── application.scss
│       ├── jquery.tagit.css
│       └── tagit.ui-zendesk.css
├── javascript
│   ├── packs
│   │   ├── application.js
│   │   └── tags.js

そしてtag-itを適用したいhtmlに追記

.
.
<script type="text/javascript">
    $(document).ready(function() {
        $("#tags").tagit();
    });
</script>
.
.
<%= f.label :tag_name %> 
<%= f.text_field :tag_name, value:@tag_list %>
<ul id="tags"><%= f.text_field :tag_name %></ul>

##エラー

Chromeの開発者ツールで見ると、上記ページに以下のようなエラーが見られます。


application.js:12 Uncaught Error: Cannot find module 'tag-it'
    at webpackMissingModule (application.js:12)
    at Module.<anonymous> (application.js:12)
    at Module../app/javascript/packs/application.js (application.js:26)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
tag-it.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
VM20:3 Uncaught TypeError: $(...).tagit is not a function
    at HTMLDocument.<anonymous> (<anonymous>:3:20)
    at Object.resolveWith (jquery.min.js:16)
    at Object.done (jquery.min.js:16)
    at init.ready (jquery.min.js:16)
    at <anonymous>:2:17
    at o.assignNewBody (turbolinks.js:604)
    at o.replaceBody (turbolinks.js:542)
    at turbolinks.js:535
    at o.e.renderView (turbolinks.js:495)
    at o.render (turbolinks.js:533)

rails sのログをみると以下のエラーが見つかります。

ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve 'tag-it' 

他に見るべきファイルがありましたらご指摘ください。
煩雑かつ大雑把な質問で申し訳ありませんがよろしくお願いします。

Answer 1

すいません。当方も初学者ですので参考程度に（的外れでしたら申し訳ないです）.
以下３点が気になりました。
0. エラー

rails sのログをみると以下のエラーが見つかります。

とありますが、こちらのエラーはwebpackerのコンパイルエラーでしょうか？だとするとjsのコンパイルに失敗してtag-itのjsが読み込まれていないかもしれません。

２. webpackerのエントリーファイル

app/javascript/packsにダウンロードしたtags.jsを置きました。

とありますが、tag-itのjsライブラリはtag-it.jsもしくはtag-it.min.jsではないでしょうか（github参照）。現状だとapp/javascript/packs/application.jsのrequire("tag-it")という設定と、実際のjsのファイル名が不一致を起こしているように思えます。

３. 前提のjs

そもそもsprocket/assetpipelineではなくwebpackerを利用してjsを利用されていると考えましたが、tagitはjqueryやjquery-uiが関連のライブラリとして必須のようですので、ここらあたりの必要なjsがyarn addコマンドでインストールもしくはCDNで読み込みされているでしょうか

以上です。ご参考になれば