RailsでRatyを使って星を表示させたいが表示できない

Question

環境

ruby 3.1.2
rails 6.1.4
raty 4.1.0

実現したいこと

・ratyを使い、本の投稿時にレビューをできるようにしたい

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

books:109 Uncaught TypeError: $(...).raty is not a function
    at books:109:16

該当のソースコード

<%= form_with model:book,local:true do |f| %>
  <div id="error_explanation">
    <% if book.errors.any? %>
      <h3><%= book.errors.count %>errors prohibited this obj from being saved:</h3>
      <ul>
        <% book.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    <% end %>
  </div>
  <div class="form-group">
    <%= f.label :title %>
    <%= f.text_field :title, class: 'form-control book_title' %>
  </div>
  <div class="form-group">
    <%= f.label :opinion %>
    <%= f.text_area :body, class: 'form-control book_body' %>
  </div>
  <div class="form-group row" id="star">
    <%= f.label :star,'評価 ', class:'col-md-3 col-form-label' %>
    <%= f.hidden_field :star, id: :review_star %>
  </div>
  <script>
    $('#star').empty();
    $('#star').raty({
      size     : 36,
      starOff:  '<%= asset_path('star-off.png') %>',
      starOn : '<%= asset_path('star-on.png') %>',
      scoreName: 'book[star]',
      half: false,
    });
  </script>
  <div class="form-group">
    <%= f.submit class: 'btn btn-success' %>
  </div>
<% end %>

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"
import "popper.js"
import "bootstrap"
import '@fortawesome/fontawesome-free/js/all';
import "../stylesheets/application"
window.$ = window.jQuery = require('jquery');
require('packs/raty')

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

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)
module.exports = environment

試したこと

yarn add jgueryをもう一度行ったりしましたが全く変わりませんでした。

Answer 1

最新のratyのバージョンであるとjqueryに依存しないらしく、

<script>
    $('#star').empty();
    new Raty(document.querySelector('#star'), {
      size     : 36,
      starOff:  '<%= asset_path('star-off.png') %>',
      starOn : '<%= asset_path('star-on.png') %>',
      starHalf: '<%= asset_path('star-half.png') %>',
      scoreName: 'book[star]',
      half: true
    });
  </script>

このように書けばいいようでした