rails6 fullcalender5 アプリが表示されない。

Question

前提・実現したいこと

railsアプリで、
以前は問題なく表示されていましたが、
bootstrapの導入を試みたり、DBの名前変更を試みたりしている間に
アプリが全く表示されないようになりました。
ローカル環境も本番環境も同じ状態です。
ページを再読み込みしても改善されません。

もともとの画面表示

現状

真っ白になって、何も表示されません。

発生している問題・エラーメッセージ

検証ツール

preact.module.js:341 Uncaught TypeError: Cannot read property '__k' of null
    at O (preact.module.js:341)
    at DelayedRunner.Calendar._this.handleRenderRequest [as drainedOption] (main.js:48)
    at DelayedRunner.drained (main.js:8619)
    at DelayedRunner.tryDrain (main.js:8597)
    at DelayedRunner.request (main.js:8546)
    at Calendar.render (main.js:105)
    at HTMLDocument.<anonymous> (calender.js:55)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)

該当のソースコード

index.json.jbuilder

json.array!(@events) do |event|
  json.extract! event, :id, :title, :body  
  json.start event.start_time
  json.end event.end_time   
  json.url event_url(event, format: :html)
end

calender.js

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import listPlugin from '@fullcalendar/list';
import timeGridPlugin from '@fullcalendar/timegrid';

document.addEventListener('turbolinks:load', function() {

  let calendarEl = document.getElementById('calendar');
  let calendar = new Calendar(calendarEl, {
    navLinks: true,
    editable: true,
    nowIndicator: true,
    initialView: 'dayGridMonth',
    displayEventTime: false,
    
    locale: 'ja',
    timeZone: 'Asia/Tokyo',
    height: 600,
    headerToolbar: {
      left: "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
      center: "title",
      right: "today prev,next"
    },
    buttonText: {
      today: '今日',
      month: '月',
      list: 'リスト',
      week: '週',
      day: '日',
    },
    views: {
      timeGridWeek: {
        slotMinTime: '07:00:00',
        slotMaxTime: '22:00:00'
      },
      timeGridDay: {
        slotMinTime: '07:00:00',
        slotMaxTime: '22:00:00'
      }
    },
    eventClick: function(event) {
    },
    dayCellContent: function(e) {
      e.dayNumberText = e.dayNumberText.replace('日', '');
    },

    eventSources: [{url:'/events.json',
    color: '#2ECCFA'}
    ],
    plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin,  ]
  });


  calendar.render();
});

applicarion.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../calender.js")
require('jquery') 

event_controller.rb

class EventsController < ApplicationController
  before_action :set_event, only: [:show, :edit, :update, :destroy]
  before_action :move_to_index,except:[:index]
 

  
  def index
    @events = Event.all
    @customer = Customer.all
  end

  def new
    @event = Event.new
  end

  def create
    @event = Event.create(event_params)
    
    if  @event.save
      redirect_to root_path, notice: "イベントを登録しました"
    else
      redirect_to new_event_path, notice: "登録出来ませんでした"
    end
  end

  def destroy
    if @event.destroy
      redirect_to root_path, notice: 'イベントを削除しました'
    else
      flash.now[:alert] = 'イベントを削除できませんでした'
      render :show
    end
  end

  def edit
  end

  def update
    if @event.update(event_params)
      redirect_to root_path, notice: 'イベントを編集しました'
    else
      flash.now[:alert] = '必須事項を入力してください'
      render :edit
    end
  end

  def show
  end



  private

  def set_event
    @event = Event.find(params[:id])
  end

  def event_params
    params.require(:event).permit(:title, :body, :start_time, :end_time, :user, customer_ids:[]).merge(user_id: current_user.id)
  end

  def move_to_index
    unless user_signed_in?
      redirect_to action: :index
    end
  end
  
end

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: []

  # 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: true
    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: true

  # Extract and emit a css file
  extract_css: false

  # Cache manifest.json for performance
  cache_manifest: true

development.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

enviroment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: 'popper.js'
  })
)
module.exports = environment

index.html.haml

.Customer-contents
  -if user_signed_in?
    .Side
      .Side__header
        顧客一覧
      .Side__body
        .Side__body__customer
          [e-mail] do |customer|
            -if user_signed_in?
              -if current_user.id == customer.user_id
                .Customer-name
                  =link_to customer_path(customer.id),class: "Customer-name__btn" do
                    =customer.name  
      .Side__footer
        =link_to(new_customer_path,class: "Side-btn") do
          ＋
          顧客登録
    .Main
      .Main__header
        .Main__header__contents
          .Main__header__contents__left
            CustomerCalender
          .Main__header__contents__right
            -if user_signed_in?
              =link_to(destroy_user_session_path,method: :delete,class: "Right__login") do
                ログアウト
            - else
              = link_to(users_guest_sign_in_path, method: :post,class: "Right__login" ) do
                ゲストログイン（閲覧用）
              =link_to(new_user_session_path,class: "Right__login") do
                ログイン
              =link_to(new_user_registration_path,class: "Right__new") do
                新規登録
      .Main__body
        -if user_signed_in?
          %p#calendar
      .Main__footer
        .Main__footer__content
          -if user_signed_in?
            =link_to(new_event_path,class: "Footer-btn") do
              ＋
              スケジュール入力



  -if user_signed_in?
    .Side-hiden
      .Side-hiden__header
        顧客一覧
      .Side-hiden__body
        .Side-hiden__body__customer
          [e-mail] do |customer|
            -if user_signed_in?
              -if current_user.id == customer.user_id
                .Customer-name
                  =link_to customer_path(customer.id),class: "Customer-name__btn" do
                    =customer.name  
      .Side-hiden__footer
        =link_to(new_customer_path,class: "Side-btn") do
          ＋
          顧客登録

試したこと

・yarn install
・mysql.server start
・yarn add fullcalendar
・rails webpacker:install
・bin/webpack
・xcode-select --install
・npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list @fullcalendar/Interaction

補足情報（FW/ツールのバージョンなど）

ruby '2.6.5'
rails '6.0.0'
fullcalender v5
gem 'mysql2', '>= 0.4.4'
gem 'webpacker', '> 4.0'
gem 'turbolinks', '> 5'
gem "devise"
webpack-dev-server@3.11.1

---

yarnとかwebpack系のエラーかと思い、
調べて再installなどしてみましたが、改善されませんでした。
皆様のお力をお借り出来ればと思います。

何卒よろしくお願い致します。

Comments

[rhiroe]

えーと、何がわからないのでしょうか？エラーメッセージに書いてある通りなので、まずはそのエラーを解決するところがネクストアクションになると思うのですが、エラーメッセージが読めない(英語が読めない)ということでしょうか？

ActionView::Template::Error (undefined method `id' for nil:NilClass)

エラーメッセージというのはこれのことです。

[a-ichi]

Mugheart様

コメントありがとうございます。
deviseのログアウト時のpathを記載しましたら一回解決したように見えましたが、解決出来てませんでした。

エラーメッセージがそれだとは認識出来たのですが、解決方法が分かりませんでした。
以前までは、このようなエラーが出た事がなく、通常に遷移出来ていたので、jsonファイルに問題があるとは思えず、bootstrapの導入を試みたり、ローカルdbの名前の変更を試みたりした後で、このようなエラーになった為、
yarnとかwebpack系の問題だと思っていました。

上記のエラーは、idが無い為、トップページを表示出来ないというエラーという事でしょうか？

[rhiroe]

undefined method `id' for nil:NilClass
Google翻訳にかけると
nil：NilClassの未定義のメソッド `id '
となります。もう少し綺麗にすると
NilClassのnilというオブジェクトに対してidというメソッドは定義されていません
となります。すなわち nil.id が実行されているということです。
idメソッドを実行しているところを探してみると
current_user.id というのがあります(今は質問内容から消えているようですが)、このcurrent_userがnilになっているということですね。

[a-ichi]

Mugheart様
なるほど、理解出来ました。
丁寧にご説明頂きまして、ありがとうございます。
その部分は削除してみたのですが、エラーは解消されなかったので、
他にも原因があるみたいです。

Answer 1

トップページを未ログインの場合、
ログインページに遷移するように変更した事で解決しました。