javascriptで非同期通信による実装でレスポンスの表示がうまくいきません。

前提

チャットアプリを製作中でして、非同期通信でメッセージを送信できるように実装中です。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

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

送信ボタンを押した際にブラウザに反映されず、下記のようなエラーがでてしまいました。

上記のエラーをクリックすると下記のようにでてきます。

該当のソースコード

routes.rb

Rails.application.routes.draw do devise_for :users root to: "rooms#index" resources :users, only: [:show, :edit, :update] resources :rooms, only: [:new, :create, :destroy] do resources :messages, only: [:index, :create] end end

MessagesController

class MessagesController < ApplicationController before_action :set_room, only: [:index, :create] def index @message = Message.new @messages = @room.messages.includes(:user) end def create @message = @room.messages.new(message_params) if @message.save render json:{ message: @message} else @messages = @room.messages.includes(:user) render :index end end private def set_room @room = Room.find(params[:room_id]) end def message_params params.require(:message).permit(:content, :image).merge(user_id: current_user.id) end end

message.js

function message (){ const submit = document.getElementById("submit"); if (!submit){ return false;} submit.addEventListener("click", (e) => { e.preventDefault(); const form = document.getElementById("messageform"); const formData = new FormData(form); const XHR = new XMLHttpRequest(); const url = location.pathname XHR.open("POST", url, true); XHR.responseType = "json"; XHR.send(formData); XHR.onload = () => { const list = document.getElementById("messagelist") const item = XHR.response.message; const html = ` <div class="message"> <div class="upper-message"> <div class="message-user"> ${item.user.name} </div> <div class="message-date"> l ${item.created_at} </div> </div> <div class="lower-message"> <div class="message-content"> ${item.content} </div> <img src=${item.image}, class: ”message-image"> </div> </div>`; list.insertAdjacentHTML("afterend", html); }; }); }; window.addEventListener('load', message);

index.html.erb

<%= render "shared/header" %> <div class="wrapper"> <div class="sidebar"> <%= render "side_bar" %> </div> <div class="chat"> <%= render "chat" %> </div> </div>

_chat.html.erb

<div class="chat-header"> <div class="left-header"> <div class="header-title"> <%= @room.name %> </div> </div> <div class="right-header"> <div class="header-button"> <%= link_to "チャットルーム削除", room_path(@room), method: :delete %> </div> </div> </div> <div class="messages", id="messagelist"> </div> <%= form_with model: [@room, @message], class: 'form', id: 'messageform' do |f| %> <div class="form-input"> <%= f.text_field :content, class: 'form-message', placeholder: 'メッセージを入力' %> <label class="form-image"> <span class="image-file">画像</span> <%= f.file_field :image, class: 'hidden' %> </label> </div> <%= f.submit '送信', class: 'form-submit', id: "submit" %> <% end %>

試したこと

エラー分で検索してもいまいちヒットしません。

console.log(item)を実行し、確認しました。レスポンスが返ってきているとは思うのでconst htmlの所の書き方がいけないんでしょうか...

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

ここにより詳細な情報を記載してください。