rails 非同期コメント機能 フォーマットがないと言われる

Question

ご覧いただきありがとうございます。
現在教材をもとにrailsアプリを作成しており非同期コメント機能を作成しております。
教材通りに進めていたのですが以下エラーがなかなか解消できないです。

CommentsController#create is missing a template for this request format and variant. request.formats: ["text/html"] request.variant: []

該当するhtmlがないよという意味のエラーかと思いますがjsファイルを用意しておりコントローラーでも
jsファイルに遷移するように記述しています。色々と記述を変えてみたのですがなぜかこのエラーが毎回出てきてしまって詰まってしまいました。
どなたかわかる方ご教授いただけましたら幸いです。

環境は以下の通りです。
macOS Catalina バージョン 10.15.6
Ruby 2.6.6
Rails 5.2.2

show.html.erb

<p><%= @post.content %></p>

<div id="like-icon-post-<%= @post.id.to_s %>">
  <% if @post.liked_by(current_user).present? %>
    <%= link_to "いいねを取り消す", post_like_path(@post.id, @post.liked_by(current_user)), method: :DELETE, remote: true, class: "loved hide-text" %>
  <% else %>
    <%= link_to "いいね", post_likes_path(@post), method: :POST, remote: true, class: "love hide-text" %>
  <% end %>
</div>

<%= form_with model: [@post,@comment] do |f| %>
  <p>
    <%= f.text_field :comment %>
  </p>
    <%= f.submit "コメントする" %>
<% end %>

comments_controller.rb

class CommentsController < ApplicationController
  before_action :authenticate_user!

  def create
    @comment = Comment.new(comment_params)
    @post = @comment.post
    if @comment.save
      respond_to :js
    else
      flash[:alert] = "コメントに失敗しました"
    end
  end

  private
    def comment_params
      params.required(:comment).permit(:user_id, :post_id, :comment)
    end
end

create.js.erb

$('#comment-post-<%= @post.id.to_s %>').
  html('<%= j render "posts/comment_list", { post: @post } %>');
$('#comment-form-post-<%= @post.id.to_s %> #comment_comment').val("");

やったこと
エラーの通り確かにhtmlファイルを用意すればエラーは解消しますが問題なのがなぜjsファイルを読んでくれないのか。よくあるミスでパスやファイル名が違っていて読み込めないとありますが何度も確認しviews/comments/create.js.erbと記述してあります。
またviewでform_withの記述を以下の通りに書いてみたものの特に変化はありませんでした。

<%= form_with model: [@post,@comment], local: false, do |f| %>
  <p>
    <%= f.text_field :comment %>
  </p>
    <%= f.submit "コメントする" %>
<% end %>

<%= form_with model: [@post,@comment], url: post_comments_path(@post), do |f| %>
  <p>
    <%= f.text_field :comment %>
  </p>
    <%= f.submit "コメントする" %>
<% end %>

お手数おかけしますがお力を貸していただけると嬉しいです。宜しくお願いします。

Answer 1

  def comment_params
    params.required(:comment).permit(:user_id, :post_id, :comment)
  end

この部分があやしいです。
user_id と post_id はフォームから送信されてくるデータに含まれてないように見えます。
なのでこれらが空になり @comment.save に失敗、else の方に行って view が必要になるんじゃないかと。

ただしくは以下のような感じになると思います。

  def comment_params
    params.required(:comment)
      .permit(:comment)
      .merge(post_id: params[:post_id], user_id: current_user.id)
  end

Comments

[otyaotya]

neko_daisuki様！
今回も有難うございます。。教えていただいた通りに記述したところコメントが作成されるようになりました！そもそもコメントが作成されていなかったのですね。。念のためログを追記しておきます。
最初
```
Started POST "/posts/2/comments" for 172.18.0.1 at 2021-10-27 07:52:29 +0000
Cannot render console from 172.18.0.1! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by CommentsController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"bcF86ACCkCIzKQ0snuL+8Y+nzemdRzDxXHH8bPAecPHfbgsM2hZBhYVgiyCEzDA1XttuS5OggMbpxxyBSnXjIw==", "comment"=>{"comment"=>"aaa"}, "commit"=>"コメントする", "post_id"=>"2"}
User Load (1.4ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
(3.6ms) BEGIN
(5.2ms) ROLLBACK
Completed 406 Not Acceptable in 1621ms (ActiveRecord: 10.2ms)

ActionController::UnknownFormat (CommentsController#create is missing a template for this request format and variant.

request.formats: ["text/html"]
request.variant: []):
```
変更後
```
Started POST "/posts/2/comments" for 172.18.0.1 at 2021-10-27 12:20:33 +0000
Cannot render console from 172.18.0.1! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by CommentsController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"bcF86ACCkCIzKQ0snuL+8Y+nzemdRzDxXHH8bPAecPHfbgsM2hZBhYVgiyCEzDA1XttuS5OggMbpxxyBSnXjIw==", "comment"=>{"comment"=>"aaa"}, "commit"=>"コメントする", "post_id"=>"2"}
User Load (1.2ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
Post Load (1.0ms) SELECT `posts`.* FROM `posts` WHERE `posts`.`id` = 2 LIMIT 1
(0.7ms) BEGIN
User Load (4.2ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
Comment Create (1.3ms) INSERT INTO `comments` (`comment`, `post_id`, `user_id`, `created_at`, `updated_at`) VALUES ('aaa', 2, 1, '2021-10-27 12:20:33', '2021-10-27 12:20:33')
(5.9ms) COMMIT
Completed 406 Not Acceptable in 53ms (ActiveRecord: 14.3ms)

ActionController::UnknownFormat (ActionController::UnknownFormat):

app/controllers/comments_controller.rb:8:in `create'
```
ちなみに当初の書き方ですがpost_idやuser_idがデータに含まれていないためmergeでそれぞれ追加してあげるという認識で合っておりますでしょうか？

また、変更後エラー内容が変わりまたフォーマットがないと出てしまいました。

その後調べてみたところRailsPanelで内容を確認できるとのことでしたので見てみましたがやはりhtmlを要求しているようです。なお同様のエラーがあった方はパスがおかしかったようです。パスも再度確認しましたがapp/views/comments/create.js.erbで問題はないように見えます。form_withも念のためlocal: falseにしているのですが特に反応がありませんでした。。申し訳ないのですが引き続きお力貸していただけますでしょうか。

[neko_daisuki]

> ちなみに当初の書き方ですがpost_idやuser_idがデータに含まれていないためmergeでそれぞれ追加してあげるという認識で合っておりますでしょうか？

あっています。

create の if @comment.save を if @comment.save! に変更してみてください。
save に失敗したエラーが発生するはずですので、それを修正します。

また、意図せず @comment の save に失敗したとき、else の方にくるわけですが、
そのときのための処理を追加する必要があります。

[otyaotya]

neko_daisuki様、ありがとうございます。無事解決いたしました。解決した経緯は別途追記いたします。何度も助けていただき本当にありがとうございました！！

Answer 2

教えていただいた方法を試すにあたり違うページに遷移していたところ別の箇所でuninitialized constantというエラーが発生しておりました。確認した所ルーティングでroot to: 'homes#top'になるところを'home#top'と記述してしまっておりました。そこを直したところなぜかcommentsのcreate.jsファイルが読み込まれるようになりました。

・きちんとデータが保存されているか
・ルーティングを全て確認する
・view,コントローラーそれぞれがjsで送りjsを待ち受けているのかを確認する
・ファイルの置き場所に間違いがないか（スペルミス等）確認する

今後は同様のエラーが起きたら上記に注意していきます。
本当にありがとうございました！！