[Rails]チャット機能実装中 js.erbファイルが読み込めない

Question

rails6

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

https://qiita.com/take18k_tech/items/00cc14c0eff45073ffc7
https://qiita.com/rhiroe/items/4c4e983e34a44c5ace27
上記を参考にしながらグループチャット機能を実装しようとしています。

create.js.erbファイルを作成したところ、create実行時に下記のエラーが出て先に進みません。

該当のソースコード

message.rbのselfに正常にデータが渡っている所までは確認できました。

routes.rb
 resources :recruits do
    resources :rooms, only: [:index, :create]
  end

index.html.erb
<%= form_with(model: @message, url: recruit_rooms_path, method: :post, class: 'needs-validation', html: {novalidate: false}) do |f| %>
  <div class="input-group">
    <%= f.text_field :content, class: "form-control", id: "message_content", placeholder: "メッセージを入力(200文字以内)" %>
    <%= f.submit "送信", class: "btn btn-primary input-group-append", id: "message-button" %>
  </div>
<% end %>

room_channel.rb
  def subscribed
    stream_from "room_channel_#{params['recruit']}"
  end

/*global $ messageContainer*/
import consumer from "./consumer";

document.addEventListener('turbolinks:load', () => { // js.erb 内で使用できるように変数を定義しておく
  window.messageContainer = document.getElementById('message-container');
  if (messageContainer === null) { // 以下のプログラムが他のページで動作しないようにしておく
      return;
  }

  consumer.subscriptions.create({ channel: 'RoomChannel', recruit: $('#message-container').data('recruit_id') }, {
    connected() {
      console.log("connected");
    },
      
    disconnected() {
    },
    
  // room_channel.rbでブロードキャストされたものがここに届く
    received: function(data) {
      console.log("received");
      // サーバー側から受け取ったHTMLを一番最後に加える
      messageContainer.insertAdjacentHTML('beforeend', data['message']);
    }
  });
});

rooms_controller.rb
def index
    @recruit  = Recruit.find(params[:recruit_id])
    @messages = Message.where(recruit_id: @recruit).includes(:user, :recruit).order(created_at: :desc).page(params[:page]).per(30)
    @message  = Message.new
    略
end

def create
  @message = current_user.messages.new(message_params)
  @message.recruit = Recruit.find(params[:recruit_id])
  @message.save
  ActionCable.server.broadcast 'room_channel', message: @message.template
end

message.rb
  belongs_to :recruit
  belongs_to :user
  
  validates :content,  presence: true, length: { maximum: 200 }
  
  # 投稿されたメッセージをメッセージ用の部分テンプレートでHTMLに変換
  def template
    ApplicationController.renderer.render partial: 'messages/message', locals: { message: self }
  end

create.js.erb
// フォームに入力した文字列を消去
console.log('create.js.erb');
document.getElementById('message_content').value = '';

create.html.erbファイルを作成すると、エラーは出なくなりますが何もないcreateページに移動します。
どうすればjs.erbが読み込めるのか、それとも他が原因なのか分かりません。アドバイス頂けると助かります

Answer 1

リクエストを JS にしたければ form_with か ヘルパーパスオプションに format: js を追加します

url: recruit_rooms_path(format: :js)

または

form_with(model: @message, url: recruit_rooms_path, method: :post, format: :js, class: 'needs-validation', html: {novalidate: false}) do |f|

Answer 2

https://qiita.com/rhiroe/items/4c4e983e34a44c5ace27
を参考に、別の方法でチャット機能を実装しました。

その際のコードと発生した問題と解決方法は下記リンクにあります。
https://teratail.com/questions/309684