1

環境

ruby 3.1.2
rails 6.1.4
raty 4.1.0

解決したいこと

Ruby on railsで本のレビューの投稿をできるようなページを作成しています。
ratyで星による評価を実装しようとしたところ、下記のエラーが出てしまいました。
raty.jsはhttps://github.com/wbotelhos/raty/blob/main/src/raty.js
こちらからコピペしてpacksの下に入れました。多くの記事に書いてあるgithubにはバージョンがアップしているせいか飛ぶことができなかったので、自分で検索して探しました。

発生している問題・エラー

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 '評価 ', 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') %>',
      starHalf: '<%= asset_path('star-half.png') %>',
      scoreName: 'book[star]',
      half: false
    });
  </script>
  <div class="form-group">
    <%= f.submit class: 'btn btn-success' %>
  </div>
<% end %>
<!DOCTYPE html>
<html>
  <head>
    <title>Bookers2Ver2</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
      <main>
        <p id="notice"><%= notice %></p>
        <%= yield %>
      </main>
    <%= render 'layouts/footer' %>
  </body>
</html>
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)
module.exports = environment
// 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()

自分で試したこと

jqueryを導入し直したり、turbolinksを無効化したり、いろいろ試しましたが、全く変わりませんでした。

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。