TypeError: Comments is undefined

Question

I'd like to submit new comments via AJAX using JavaScript and rails-ujs in my Rails 5.1.4 app running in the production environment, database Postgres 11 (without the deployment)

(This works in the development environment)

But when I try to post a new comment, my view doesn't change and in my web-console i receive this:

TypeError: Comments is undefined referencing line 9 in my create.js.erb file

create.js.erb

var comment = {
  'body': '<%= @comment.body %>',
  'commenter': '<%= @comment.user.name %> ',
  'commenterId': '<%= @comment.user.id %> ',
  'avatar': '<%= @comment.user.avatar %> ',
  'datetime': '<%= @comment.created_at.strftime('on %e %b %Y at %H:%M') %>',
};

Comments.displayComment(comment);     # <~ Line causing the error

console.log("Comment", comment);

extracted comments.js

Comments = {};

Comments.displayComment = function(comment) {

  var commentBlock = document.createElement('blockquote');
  commentBlock.className = 'blockquote';

  ...
  ...
  ...

  var comments = document.getElementById('commentList');
  comments.appendChild(commentBlock);
};

extracted show view (set remote: true)

<%= form_for([@tip, @tip.comments.build], remote: true) do |form| %>

I've been checking other post looking for similar answers, but no luck yet. Also, I've tried declaring a variable 'Comments' in the create.js.erb file, but received the same error.

I think I'm missing something in my javascript, but I not sure what. Any help would be appreciated. Thanks.

Answer 1

These are the steps I followed to solve it:

In my production.log, I found a conflict with a bootstrap.js file. So, I deleted it beforehand.

1. Remove all of the files in the public/assets folder. (Remove the previous precompilations)
2. Empty the /my_rails_app/tmp folder. (To clear temporary files created by rails)
3. Run RAILS_ENV=production rails assets:precompile. (To precompile my assets pipeline)
4. Run RAILS_ENV=production rails server on your Terminal(bash/shell). Or just Run ./run-my-production.sh file (To restart the server in the production environment). Here an example of the run-production.sh file
5. Visit your https://localhost:3000 and try again: my AJAX call is working properly as expected.

Cheers.