rails6

https://qiita.com/take18k_tech/items/00cc14c0eff45073ffc7
https://qiita.com/rhiroe/items/4c4e983e34a44c5ace27
I am trying to implement the group chat function while referring to the above.

When I created the create.js.erb file, I get the following error when executing create and cannot proceed.

I was able to confirm that the data was normally passed to self in message.rb.

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 |%>
  
  <% = f.text_field: content, class: "form-control", id: "message_content", placeholder: "Enter message (up to 200 characters)"%>
  <% = f.submit "submit", class: "btn btn-primary input-group-append", id: "message-button"%>
  
<% end%>

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

/ * global $messageContainer * /
import consumer from "./consumer";
document.addEventListener ('turbolinks: load', () =>{// Define variables for use in js.erb
  window.messageContainer = document.getElementById ('message-container');
  if (messageContainer === null) {// Prevent the following programs from running on other pages
      return;
  }
  consumer.subscriptions.create ({channel:'RoomChannel', recruit: $('# message-container'). data ('recruit_id')}, {
    connected () {
      console.log ("connected");
    },
    disconnected () {
    },
  // What was broadcast on room_channel.rb arrives here
    received: function (data) {
      console.log ("received");
      // Add the HTML received from the server side at the very end
      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
    Abbreviation
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}
  # Convert posted message to HTML with partial template for message
  def template
    ApplicationController.renderer.render partial:'messages/message', locals: {message: self}
  end

create.js.erb
// Erase the string entered in the form
console.log ('create.js.erb');
document.getElementById ('message_content'). value ='';

When I create the create.html.erb file, I get rid of the error but go to the empty create page.
I don't know how to load js.erb or something else. I would appreciate it if you could give me some advice