【rails6/webpack】 jQueryプラグインの正しい導入手順が分からない

Question

railsに少し慣れてきた初心者です。
rails/webpackへのjQueryプラグインの導入がいまひとつ理解できてなく苦戦してます。

rails 6.1
venobox 1.9.2
開発 Ubuntu
本番 Heroku

前提・実現したいこと

画像スライダーの「venobox」というjQueryプラグインを使いたい

発生している問題・エラーメッセージ

サムネ画像をクリックすると拡大画像が開くのが正常な動作なのですが、

本番環境で動かすと、おかしな場所（ページ最下部）に表示され、閉じるボタンやカーソルアイコンが表示されません。

ブラウザのconsoleにエラーは出てません。

本番環境(heroku)で正常に動作できません。

該当のソースコード

正しい書き方か分かってないですが
application.jsに書かず、item/show側からjsを利用するようにしてました。

app\views\items\show.html.erb
※ページ最下部で呼ぶ

<%= javascript_pack_tag 'items/venobox' %>

app\javascript\packs\items\venobox.js

import '../plugin/venobox/venobox.css'
const venobox = require ('../plugin/venobox/venobox')

$(document).on("turbolinks:load", () => {
  $(function() {
    $('.venobox').venobox({
        infinigall: true,
        numeratio: true,
    });
  });
});

venobox本体は、以下に置いてます。
app\javascript\packs\plugin\venobox

開発環境側ではこれで正常に動作してます。

試したこと

本番環境ではプラグインが正常に読み込めてないと考え、プラグインの「読み込み方」を変えてみました。
application.jsで読むようにしました。

\app\javascript\packs\application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import '../stylesheets/style.css'


// jquery
var jQuery = require('jquery')
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;


// 画像ファイル
const images = require.context('../images', true)

// ここでプラグインを読み込む
import '../packs/plugin/venobox/venobox.css'
const venobox = require ('../packs/plugin/venobox/venobox')
$(function() {
  $('.venobox').venobox({
      infinigall: true,
      numeratio: true,
  });
});

この方法だと、おかしな場所に表示されることはなくなりましたが、
初回表示だけ、相変わらず閉じるボタンとカーソルが表示されません。

2回クリックするか「更新」しないと正常に表示されませんでした。

もう一歩の所まで来てそうですがここから分かりません。

先輩方どうか教えていただけないでしょうか？
宜しくお願い致します。

Answer 1

$(document).on("turbolinks:load", () => {
で囲ってあげたら動作しました。

初回表示だけおかしいので、ピンときました。