CODEWITHSUNDEEP
javascriptruby-on-railsreactjsactioncable
ejaco
ejaco

Reputation: 432

ActionCable-Rails-React: Messages don't load and console shows 'App is not defined'

Building a chat app with Rails and React, trying to implement ActionCable for real time updates. The app is built and messaging works with setInterval. The console error is 'Uncaught ReferenceError: App is not defined'. This piece of code is inside my message_list.jsx container, and is specifically causing the app to break. Any help would be greatly appreciated.

componentDidMount() { // For the first channel
    this.subscribeActionCable(this.props);
  }

subscribeActionCable = (props) => {
    App[`channel_${props.selectedChannel}`] = App.cable.subscriptions.create(
      { channel: 'ChannelsChannel', name: props.selectedChannel },
      {
        received: (message) => {
          if (message.channel === props.selectedChannel) {
            props.appendMessage(message);
          }
        }
      }
    );
  }

Upvotes: 0

Views: 528

Answers (1)

ejaco
ejaco

Reputation: 432

I was able to solve the issue and wanted to document this for the benefit of others. I'm using rails6 + webpacker with react and action cable for a chat app. The entire react front end is in a 'javascript' folder outside of the assets pipeline. You may have used a setInterval to refresh messages, and you're now having problems with setting up action cable. If you've configured everything else correctly, and you're getting a console error where 'App is not defined' and messages don't load, this may help.

  1. add javascript_include_tag to views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Rails React Chat</title>
    <%= csrf_meta_tags %>
    <%= action_cable_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
  </head>
  <body>
    <%= render 'shared/navbar' %>
    <%= render 'shared/flashes' %>
    <%= yield %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
    <%= yield :after_js %>
  </body>
</html>
  1. if missing, add a javascripts folder to the asset pipeline and configure application.js... 
//= require rails-ujs
//= require_tree .

and cable.js

// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the `rails generate channel` command.
//
//= require action_cable
//= require_self
//= require_tree .

(function() {
  this.App || (this.App = {});

  App.cable = ActionCable.createConsumer();

}).call(this);
  1. configure manifest.js properly
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css

Upvotes: 0

Related Questions