Rails6でActionCableを使うときに出るエラーの対処

YouTubeの動画を参考にして、Rails6でActionCableを使うときに、エラーが出てすごく詰まったので、備忘録を書いていきます。その時の参考動画はRails5を使っていたので、Rails6で作ったから、出てくるエラーだと思います。

出てきたエラー

検証機能のConsoleでApp.chat.speak()を実行したときに、「Uncaught ReferenceError: App is not defined at :1:1」というエラー

解決方法

room_channel.jsを下のようにします。

import consumer from "./consumer"

const chatChannel = consumer.subscriptions.create("RoomChannel", {
  connected() {
    
    // Called when the subscription is ready for use on the server
  },

  disconnected() {
    // Called when the subscription has been terminated by the server
  },

  received(message) {
    const messages = document.getElementById('messages')
    messages.innerHTML += message
    // Called when there's incoming data on the websocket for this channel
  },

  speak: function(content) {
    return this.perform('speak', {message: content});
  }
});

document.addEventListener('DOMContentLoaded', function(){
  var input = document.getElementById('chat-input')
  var button = document.getElementById('button')
  button.addEventListener('click', function(){
    var content = input.value
    chatChannel.speak(content)
    input.value = ''
  })
})

参考動画の、3行目と29行目を変更したら、エラーが消え想定通りに動くようになります。