

### 環境

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にはバージョンがアップしているせいか飛ぶことができなかったので、自分で検索して探しました。

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

[code]

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

### 該当するソースコード

[code]

    <%= 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 %>
    
[/code]

[code]

    <!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>
    
[/code]

[code]

    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
    
[/code]

[code]

    // 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()
    
[/code]

### 自分で試したこと

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


CC BY-SA 4.0
2022-11-04T14:35:32.267
91999
2022-11-04T14:35:32.267
55214
question
ruby-on-rails jquery
railsにratyを導入したいがエラーが出る