ReactJS and javascript not displaying on Rails 5 app

Question

The reactJS components and javascript codes don't display on my rails 5 app. I'm using react-rails gem and some plain JS with the asset pipeline. Here's my application.js manifest:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require react
//= require react_ujs
//= require components
//= require init
//= require page_specific
//= require rails-ujs
//= require_tree .

I have sub-directories in my javascript assets directory and have referenced them appropriately and followed the ruby assets pipelines docs but when I run the server, the navigation bar and other element aren't displaying and clicking the button doesn't work either. See the screenshot:

screenshot

My assets files setup: screenshot 2

This is my application.html.erb file:

<!DOCTYPE html>
<html ng-app="Stories">
<head>
  <title>Stories</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>

  <%= favicon_link_tag '', type: 'image/png' %>
  <%= favicon_link_tag '', rel: 'apple-touch-icon', type: 'image/png' %>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body class="<%= controller.controller_name %> <%= controller.action_name %>">
  <%= render 'layouts/overlay' unless user_signed_in? %>
  <%= react_component('UserOverlay', {}) %>

  <div data-behavior="progress-bar" class="progress-bar"></div>

  <div class="container-fluid main-container">
    <%= yield %>
    <%= yield :sidebar %>
  </div>

</body>
<script type="text/javascript">
  window.userSignedIn = <%= user_signed_in? %>;
</script>
</html>

This is the assets.rb file:

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths << Rails.root.join('node_modules')

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )

Am I missing another step?

ReactJS and javascript not displaying on Rails 5 app

0 Answers0