jquery-validation-pluginを用いたエラーメッセージの表示ができません。

Question

実現したいこと

jquery-validation-pluginを使用したバリデーションのエラーメッセージを表示させたいと考えています。
具体的にはapp/javascript/packs/validation.jsのファイルに記述したエラーメッセージがバリデーションに引っかかった際に表示できるようにしたいです。
初心者で説明が分かりづらい点も多々あるかと思いますが、ご協力よろしくお願いいたします。

発生している問題・分からないこと

実際にアプリケーションの登録画面で何も入力せずに登録を行うと、エラーメッセージが表示されませんでした。
ブラウザのコンソールツールで確認した所、下記エラーメッセージが表示されていました。

エラーメッセージ

Uncaught TypeError: form.validate is not a function
    at HTMLDocument.<anonymous> (validation.js:9:1)
    at HTMLDocument.dispatch (event.js:290:1)
    at elemData.handle (event.js:115:1)
    at ./node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:68:1)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:885:1)
    at r.pageLoaded (turbolinks.js:839:1)
    at turbolinks.js:765:1

該当のソースコード

// validation.js
console.log("validation.js loaded");

$(document).on("turbolinks:load", function () {
  console.log("Turbolinks loaded");

  const form = $("#sign-up-id");
  if (form.length > 0) {
    form.validate({
      rules: {
        "user[name]": {
          required: true,
          minlength: 2,
          maxlength: 20,
        },
        "user[email]": {
          required: true,
          email: true,
        },
        "user[password]": {
          required: true,
          minlength: 6,
        },
        "user[password-confirmation]": {
          required: true,
          equalTo: "#user_password",
        },
      },
      messages: {
        "user[name]": {
          required: "ニックネームを入力して下さい",
          minlength: "ニックネームは2文字以上で入力して下さい",
          maxlength: "ニックネームは20文字以内で入力して下さい",
        },
        "user[email]": {
          required: "メールアドレスを入力して下さい",
          email: "正しいメールアドレスを入力して下さい",
        },
        "user[password]": {
          required: "パスワードを入力して下さい",
          minlength: "パスワードは６文字以上で入力して下さい",
        },
        "user[password-confirmation]": {
          required: "パスワード確認を入力して下さい",
          equalTo: "パスワードが一致しません",
        },
      },
      errorElement: "div",
      errorClass: "invalid-feedback",
      highlight: function (element) {
        $(element).addClass("is-invalid");
      },
      unhighlight: function (element) {
        $(element).removeClass("is-invalid");
      },
      errorPlacement: function (error, element) {
        element.closest(".form-group").append(error);
      },
      onkeyup: function (element) {
        $(element).valid();
      },
      onblur: function (element) {
        $(element).valid();
      },
    });
  }
});

// application.js
window.$ = window.jQuery = require('jquery');
import "jquery";
import "jquery-validation";
import "../packs/validation";
import "popper.js";
import "bootstrap";
import "../stylesheets/application"; 

import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";
import "channels";

import Raty from "raty.js";
window.raty = function (elem, opt) {
  let raty = new Raty(elem, opt);
  raty.init();
  return raty;
};

Rails.start();
Turbolinks.start();
ActiveStorage.start();

<%= form_with model: @user, id: "sign-up-id", url: user_registration_path do |f| %>
      <div class="form-group mb-2">
       <label class= "control-label ml-5">
        <%= f.label :name %><br />
       </label>
        <%= f.text_field :name, autofocus: true, autocomplete: "name", class: "form-control w-75 mx-auto #{'is-invalid' if @user.errors[:name].present?}" %>
        <div class= "invalid-feedback mx-auto w-75">
        </div>
      </div>
  
      <div class="form-group mb-2">
       <label class= "control-label ml-5">
        <%= f.label :email %><br />
       </label>
        <%= f.email_field :email, autocomplete: "email", class: "form-control w-75 mx-auto #{'is-invalid' if @user.errors[:email].present?}" %>
        <div class= "invalid-feedback mx-auto w-75">
        </div>
      </div>

      <div class="form-group mb-2">
       <label class= "control-label ml-5">
        <%= f.label :password %>
       </label>
        <% if @minimum_password_length %>
        <em>(<%= @minimum_password_length %> 文字以上)</em>
        <% end %><br />
        <%= f.password_field :password, id: "user_password", autocomplete: "new-password", class: "form-control w-75 mx-auto #{'is-invalid' if @user.errors[:password].present?}" %>
        <div class= "invalid-feedback mx-auto w-75">
        </div>
      </div>

      <div class="form-group mb-2">
       <label class= "control-label ml-5">
        <%= f.label :password_confirmation %><br />
       </label>
        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control w-75 mx-auto #{'is-invalid' if @user.errors[:password_confirmation].present?}" %>
        <div class= "invalid-feedback mx-auto w-75">
        </div>
      </div>

      <div class="form-group mb-2">
       <%= f.submit "新規登録", class: "btn btn-primary ml-5" %>
      </div>
     <% end %>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

・webpackのキャッシュの削除、再度ビルドの実施→ エラーは解消しませんでした。
・console.log(typeof $.fn.validate);をコンソールツール上で入力 → functionと返されました。

補足

・javascriptの読み込みは、app/views/layouts/application.html.erbで行っています。

該当箇所
<script src="https://kit.fontawesome.com/7b0c0b1a1d.js" crossorigin="anonymous"></script>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

・jquery、jquery-validation-plugin等のバージョンが記載されているpackage.jsonを下記に記載します。

{
"name": "nekonigohan",
"private": true,
"dependencies": {
"@babel/plugin-proposal-private-methods": "^7.18.6",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.4.4",
"bootstrap": "^4.6.2",
"jquery": "^3.7.1",
"jquery-validation": "^1.21.0",
"popper.js": "^1.16.1",
"turbolinks": "^5.2.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3"
}
}

Comments

[Lhankor_Mhy]

jQuery を2回読み込んでいるように見えるのが気になっています。これは必要なのでしょうか？
必要であるならば、どの識別子がどのjQueryになっているか、どのスコープで有効になっているかを確認されてみてはどうでしょうか。

[kishikishi]

ご指摘ありがとうございます。
おっしゃる通り、app/javascript/packs/application.jsの2,3行目において、jqueryを2重に読み込むような記述を行っていました。
jqueryを2回読み込む必要はないので、コードを下記のように修正しました。

import $ from "jquery";
window.$ = window.jQuery = $;

修正後、アプリケーションを起動してエラーが解消されたかを確認しましたが、解消されていませんでした。

[Lhankor_Mhy]

そうなんですね。では、webpack が関わる問題でしょうか？　お役に立てずすみません。

[kishikishi]

webpackに関して、キャッシュのクリア、記述の確認等を行ったのですが上手くいきませんでした。
もう少し自分で調べて、解決策を模索したいと思います。
コメント、ご指摘頂きありがとうございました！