I'm learning how to build a simple rails app and I'm running into some problems getting JQuery to load in the app. I'm getting a console error of "Uncaught ReferenceError: $ is not defined" but I'm unsure why it isn't working. Any help would be greatly appreciated! I feel like I might be missing some js files, because when I spun up the rails app, there wasn't a "javascripts" directory in my assets and I had to manually create one - not sure if that's normal or not.
Here's a link to my repo as well: https://github.com/scottlandes1217/Hubbubb
application.js
//= require jquery//= require jquery_ujs//= require popper//= require_tree .//= require bootstrap//= require bootstrap-sprocketsapplication.html.erb
<!DOCTYPE html><html><head><title>Hubbubb</title><%= csrf_meta_tags %><%= csp_meta_tag %><%= stylesheet_link_tag 'application', media: 'all' %><%= javascript_include_tag 'application' %></head><body><div class="container"><div class="row"><div class="col-12"><%= render partial: 'shared/navigation_bar' %><div class="my-3"><%= yield %></div></div></div></div></body></html>forum_channel.js
$(function() { $('[data-channel-subscribe="room"]').each(function(index, element) { var $element = $(element), room_id = $element.data('room-id') messageTemplate = $('[data-role="message-template"]'); $element.animate({ scrollTop: $element.prop("scrollHeight")}, 1000) App.cable.subscriptions.create( { channel: "ForumChannel", forun: forum_id }, { received: function(data) { var content = messageTemplate.children().clone(true, true); content.find('[data-role="user-avatar"]').attr('src', data.user_avatar_url); content.find('[data-role="message-text"]').text(data.message); content.find('[data-role="message-date"]').text(data.updated_at); $element.append(content); $element.animate({ scrollTop: $element.prop("scrollHeight")}, 1000); } } ); });});Thanks again!