Rails6でWebpacker開発環境でRaty.jsを使いたい。

Question

前提・実現したいこと

Rails6でWebpacker開発環境でRaty.jsを使いたい。

（環境）
・ruby 2.6.5
・Rails 6.0.2.2
・Windows　10

発生している問題

jquery.raty.jsで5段階評価機能を実装したいが、jsが効いていない。

該当のソースコード

#webpacker.yml
# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ['app/assets']

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

#javascript/packs/application.js
// 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.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("bootstrap")
require("jquery.raty")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

import 'bootstrap';
import '../stylesheets/application';
import '../stylesheets/custom';

試したこと

cssは正常に動作しています。
画像もimage_pack_tagで読み込めています。
raty.jsは効いていません。

ひととおり記事は読み込んだのですが、
webpackerの使い方がいまいち分かっておりませんで、
助言いただけると助かります。

Comments

[maisumakun]

raty自体の適用部分のコードはどのように書いていますか？（コードを書かないと有効にならないです）

[ytommy]

下記よりダウンロードしてjuery.raty.jsをそのまま使っています。
https://github.com/wbotelhos/raty

[ytommy]

あ、すみません。
そういうことではないですね。
適用部分のコードは下記です。

<div class="star-rating" data-score= <%= review.rating %> ></div>

<script>
$('.star-rating').raty({
readOnly: true,
score: function() {
return $(this).attr('data-score');
}
});
</script>

[maisumakun]

raty.jsは$().raty();のような形で呼ばないと有効になりません。それはどこへどのように書きましたか？

[ytommy]

上記はviewファイルに直接<script></script>で書いています。

Answer 1

適用部分のコードは下記です。

問題は2点あります。

• require("jquery")のようにWebpack環境からjQueryを読み込んだ場合、jQueryインスタンスはWebpack環境に閉じてしまって、他のコードからは使えません。window.$ = window.jQuery = require('jquery');のようにwindow経由で公開する必要があります。
• <script>を使ってスクリプトを書くような構成を取る場合、Turbolinksはマッチしません。require("turbolinks").start()の行を消しておきましょう。

Comments

[ytommy]

回答ありがとうございます。
window.$ = window.jQuery = require('jquery.raty');に変更したのですが、変化なしでした。
＊require("turbolinks").start()はコメントアウトしました。

[maisumakun]

> window.$ = window.jQuery = require('jquery.raty');に変更したのですが、変化なしでした。

そちらではなく、require('jquery')のほうです。

[ytommy]

window.$ = window.jQuery = require('jquery');に変更してみましたが、変化なしでした。

[maisumakun]

ブラウザのコンソールにメッセージは出ていませんか？

[ytommy]

エラーが出ていました。（下記）
Uncaught Error: Cannot find module 'jquery.raty'
at webpackMissingModule (application.js:12)
at Module../app/javascript/packs/application.js (application.js:12)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83

[maisumakun]

エラーメッセージのとおりです。yarn add jquery.ratyなどで追加する必要があります。

[ytommy]

yarn add raty-jsで追加したところ解決いたしました。
ありがとうございました。