環境
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を無効化したり、いろいろ試しましたが、全く変わりませんでした。