Rails 6 Form remote: true Error

Hi, all!

I am following along with the video on how to make a chat application using action cable. In the video, I believe Rails 5 is being used, however, I wanted to try it out with Rails 6.

Everything was going great so far. Installed Bootstrap and jQuery and properly configured my environments.js file. It was awesome. Then I get to the part right before we add action cable, and we make the chatroom form remote: true.

I cannot figure out why my form is trying to still submit as HTML instead of JS. On top of that, I am getting an ActionController::InvalidAuthenticityToken error.

Here's how I have my form set up:

<%= simple_form_for [@chatroom, Message.new], remote: true, html: { id: 'message-input' } do |f| %>
  <%= f.input :body, label: false, input_html: { rows: 1, autofocus: true } %>
<% end %>

When I submit, I get this error in my rails server:

Started POST "/chatrooms/1/messages" for ::1 at 2019-10-16 21:02:01 -0500
Processing by MessagesController#create as HTML
  Parameters: {"message"=>{"body"=>"test3"}, "chatroom_id"=>"1"}
Can't verify CSRF token authenticity.
Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms | Allocations: 968)



ActionController::InvalidAuthenticityToken - ActionController::InvalidAuthenticityToken:

Started POST "/__better_errors/cf3c4e5c6fa2d1b1/variables" for ::1 at 2019-10-16 21:02:01 -0500

Not sure what to do. I've googled and came across this but I'm not sure if it's entirely applicable: https://stackoverflow.com/questions/56128114/using-rails-ujs-in-js-modules-rails-6-with-webpacker

Any help would be greatly appreciated!

I get this same error. I'm not sure what is causing it, but I'm in the same situation you outlined. Any luck?

Nvm, seems like I just didn't know enough about the new @rails/ujs stuff. Been doing too much Angular and not staying on top of the latest way of doing Javascript in Rails ;-)