Rails6でFullCalendarを導入、表示したい

Question

実現したいこと・開発環境

実現したいこと
qiitaの記事を参考にyarnでFullCalendarを導入してカレンダーをビューに表示したい

参考記事
https://qiita.com/okayu_331/items/8c4ab42d27a8ac16da5b

開発環境
ruby 2.6.5
Rails 6.0.4.1

該当のソースコード

インストールコマンド

yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

app/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")
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

document.addEventListener('turbolinks:load', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin, interactionPlugin ]
  });

  calendar.render();
});


// 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)

config/routes.rb

Rails.application.routes.draw do
  root to: "habits#index"
  resources :habits 
end

app/controllers/habits_controller.rb

class HabitsController < ApplicationController
  def index
  end
end

app/views/habits/index.html.erb

<div id='calendar'></div>

参考記事をほぼコピペでカレンダーが表示されず原因がわからない状況です。
エラーも出ていません。
質問初心者のため情報が足りない部分もあるかもしれませんがコメント、回答よろしくお願い致します。

Comments

[skys215]

yarn devは行いましたか？

[kengoo]

ご指摘ありがとうございます。

yarn devについて無知だったため、自分なりに調べて実行したのですがカレンダーの表示には至りませんでした。

調べた結果
yarn devとは開発環境でパッケージをインストールすること。
行ったコマンド
yarn add --dev @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction
結果
エラーなく実行できたがカレンダーの表示はされない。

まだ理解していない部分等ありましたらご指摘よろしくお願い致します。

[skys215]

htmlにjavascriptを足しましたか？
DeveloperToolsでjavascriptを確認してみてください。

[kengoo]

度々ありがとうございます。

DeveloperTools ConsoleにてJavaScriptは正常に動いているようです。

[skys215]

document.addEventListener('turbolinks:load', function() {});
にconsole.log(calendarEl);を足して見てください。

app/javascript/packs/application.jsもロードされてるかも確認してください

[kengoo]

console.log(calendarEl);を足しても変わらず、
app/javascript/packs/application.jsロードされていないようでした。

またログにerror Command "webpack" not found.と出ていることが新たに気づきました。

お手数ですがこの状況も踏まえてご教授いただければと思います。

[skys215]

それは別な質問になります。
サラッとググりました、bundle exec rails webpacker:install　は実行したことありますか？

[kengoo]

ありがとうございます。
error Command "webpack" not foundの件は
bundle exec rails webpacker:installで解消されました。

しかしいまだにapp/javascript/packs/application.jsが読み込まれない原因がわからない状況です。
app/views/layout/application.html.erbにデフォルトで書かれている
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
があれば読み込まれるものだと思ったのですが、他にも必要な記述があるのでしょうか？

[skys215]

新しいエラーはありますか？
DeveloperToolのNetworkパネルでapplication.jsは読み込みできたかどうか確認できますか？

[kengoo]

新しいエラーは見当たりませんでした。
application.js読み込み確認できたと思います。
初めてNetworkパネルを使ったのですが手順として
Filter横のJSを選択してName欄下にapplication-a860ea931ce4c057e219.jsがあり、Statusが200になっていれば確認できたと認識しても大丈夫でしょうか？

[skys215]

そうですね。addEventListenerの上と下にconsole.logを追加できますか？logの内容は違う物にしてください。
console.log(1);
document.addEventListener('turbolinks:load', function() {
console.log(2);

もしコンソールに２が出てない場合は、turbolinks:loadイベントが発生してません。
もし１が出てない場合は、ファイルの読み込みに問題があると考えられます。

[kengoo]

１も２も出ていないです。
app/javascript/packs/application.jsファイルが読み込まれていないのでしょうか？

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>の有無でNetworkパネルの表示も変わるのですがコンソールは出力されません。

[skys215]

application.jsを変更後yarn devを実行しましたか。
実行してからもう一度やってみてください。
networkパネルでファイルを選択し、右側でresponseをクリックしたら、ファイルの内容も見られます。

[kengoo]

application.jsを変更後にyarn devを実行しても変わらずでした。

networkパネルのresponseでファイルの中身を確認したところ、application.jsファイルだけソースコードを足しても減らしても反映されていないようでした。
また、ファイル内容を変更後最初の読み込み時のみログにerror Command "webpack" not found.が表示されます。何か関係があるのでしょうか？

[skys215]

./bin/webpack --progressを実行してみましたか。

[kengoo]

./bin/webpack --progress実行後以下のエラーが出てしまいました
yarn run v1.22.17
error Command "webpack" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

webpackはbundle exec rails webpacker:instalコマンドを実行し、インストールされているはずなのでバージョンが合っていないとかなのでしょうか？

バージョンの確認のため実行したコマンドと結果です。的外れかもしれませんが、なにかお気づきになった点ございましたらアドバイスをいただければと思います。
npm view webpack version
5.65.0
yarn -v
1.22.17
node -v
v17.0.1

[skys215]

rubyにはあまり詳しくないのでこれ以上はわかりません。すみません。

[kengoo]

skys215さんのおかげでここまでこれました。もう少し頑張ってみたいと思います、ありがとうございました。

Answer 1

package.jsonファイルのdependencies内に"@rails/webpacker": "4.3.0",を追加することでカレンダーの表示と今までの不具合内容が解決されました。

skys215さん長い間携わっていただき本当にありがとうございました。