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?
Related
I am a newbie for Ruby on Rails programming. Recently, I am using Rails 5.2.3 with turbolinks attached. Several days ago the turbolinks seems working fine. However, recently it throws the error of "Uncaught TypeError: window.scrollTo is not a function." I would like to know the alternatives of this problem.
I have tried rearranging the javascript orders of load but it does not seem to fix the issues
Here are the application.js files that I have
//= require jquery3
//= require rails-ujs
//= require turbolinks
//= require popper
//= require bootstrap
//= require moment
//= require cocoon
//= require underscore/underscore
//= require smoothscroll-polyfill/dist/smoothscroll
//= require sweetalert2/dist/sweetalert2.all.min
//= require_tree .
and the order I have on my application.html.erb
<head>
...
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
...
<%= javascript_include_tag 'sub/rails-gmaps' %>
<%= javascript_include_tag 'sub/rails-ujs-sweetalert2' %>
<%= javascript_include_tag 'sub/modules/popper' %>
<%= javascript_include_tag 'sub/modules/tooltip' %>
<%= javascript_include_tag 'sub/modules/owlcarousel2/dist/owl.carousel.min' %>
<%= javascript_include_tag 'sub/modules/cleave-js/dist/cleave.min' %>
<%= javascript_include_tag 'sub/modules/select2/dist/js/select2.min' %>
<%= javascript_include_tag 'sub/modules/mtr-datepicker/mtr-datepicker.min' %>
<%= javascript_include_tag 'sub/modules/chart.min' %>
<%= javascript_include_tag 'sub/owl' %>
<%= javascript_include_tag 'sub/dashboard' %>
<%= javascript_include_tag 'sub/custom' %>
</head>
Would like to know what would be the cause of window.scrollTo error on turbolinks. Because the error causes all of the javascript not to be loaded properly. Thank you very much
I'm starting to learn to use React with Rails. In application.html.erb I replaced
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
with
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
How do I require everything from the /assets/javascripts/application.js file?
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require cookies_eu
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap
Do I import them all at the beginning of the /javascript/packs/application.js file?
Based on a tutorial I watched, I can just keep also the:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Then everything will be loaded, though not via Webpack.
I created a new rails application and configured the chartkick , the chart is loading good in local. But its not loading when pushed to heroku.
Why its loading in development without any error and not loading in heroku? Any clues?
Application.js
//= require Chart.bundle
//= require chartkick
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
Gemfile
gem 'chartkick'
Applicaion.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Testp</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
index.html.erb
<h1>Test#index</h1>
<%= column_chart [['Sample1', 52.9], ['Sample2', 27.7], ['Sample3', 1.6]]%>
As I pointed out in comments, when facing issues like "something not defined" one should try to disable Uglifer (or any minification tool). Minification can break your code pretty often because it messes with variable names.
I don't have general solution for this issue (minification) but you can always google your specific case:
https://github.com/ankane/chartkick/issues/347
I have been working on a ruby on rails project just now. I have created a controller named 'animals' and a view (index.html.erb) for index action. I don't want to include 'application' javascript file.
So I created animals.js
The file's content is
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= animals.coffee
I have also added animals.js and animals.css to asset.rb
Rails.application.config.assets.precompile += %w( animals.js )
Rails.application.config.assets.precompile += %w( animals.css )
My index.html.erb contains following lines
<%= stylesheet_link_tag 'animals', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'animals', 'data-turbolinks-track' => true %>
When I inspected source html code generated by server, I have seen that jquery scipts hadn't been included in the page. It was just animal.js file.
<head>
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Rails Omniauth</title>
<meta name="description" content="Rails Omniauth">
<link rel="stylesheet" media="all" href="/assets/animals.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b5433a495991b7852b855.css?body=1" data-turbolinks-track="true">
<script src="/assets/animals.self-1d93d37bf2f830ac42e82eb68e3bb0040ece5d23533a05bf77f7407fd59178d3.js?body=1" data-turbolinks-track="true"></script>
</head>
Any suggestions why these scripts had been inclued ?
Thanks.
I think your issue might be that you have two files with the same name (but different extensions). Since the Rails asset helpers treat coffescript and js files equally this is ambiguous:
<%= javascript_include_tag 'animals', 'data-turbolinks-track' => true %>
Which file should it load? I'm guessing it takes the first in alphabetical order which would be animals.coffee.
To solve the issue move the sprockets manifest to animals.coffee and remove the animals.js file.
# app/assets/animals.coffee
#= require jquery
#= require jquery_ujs
#= require turbolinks
#= require bootstrap-sprockets
#= require_self
alert 'Hello World'
You can remove the animals.coffee file and animals.js can be require in the file of application.js to available your js code in your project.
Sorry for the question, as I'm a ruby and rails novice. How do I get the asset pipeline working on rails?
In my development enviroment I have this individual files of javascript and they are loaded normally in site/app/views/stats/index.html.erb:
<%= javascript_include_tag "/assets/jquery.js" %>
<%= javascript_include_tag "/assets/stats/donut.js" %>
<%= javascript_include_tag "/assets/stats/vbars.js" %>
<%= javascript_include_tag "/assets/stats/progress.js" %>
<%= javascript_include_tag "/assets/stats/gauge.js" %>
<%= javascript_include_tag "/assets/stats/hbars.js" %>
<%= javascript_include_tag "/assets/stats/widget_grid.js" %>
<%= javascript_include_tag "/assets/stats/widget.js" %>
In production enviroment it is not working. So I'm trying to get developer enviroment to use asset pipeline. Here's what I got so far:
In site/config/enviroment/development.rb I configured
config.assets.debug = false
config.assets.compile = false
config.assets.digest = true
Then stopped my rails server and ran
bundle exec rake assets:precompile
and restarted the rails server.
Then in site/app/views/stats/index.html.erb I just replaced the javascript includes for
<%= javascript_include_tag "stats" %>
and created a site/app/assets/javascripts/stats.js file that contains
//= require stats/donut
//= require stats/vbars
//= require stats/progress
//= require stats/gauge
//= require stats/hbars
//= require stats/widget_grid
//= require stats/widget
What am I doing wrong? Any help is appreciated.
Update: problem was happening because I forgot to include a third-party library inside stats.js. Originally had this include in site/app/views/stats/index.html.erb
<%= javascript_include_tag "/assets/third-party/d3.min.js" %>
Just had to remove that include and add this one to stats.js
//= require third-party/d3.min.js
Thanks for everybody who helped!
You have to tell Rails to precompile that file. By default it works with application.js but if you create a new manifest file, you have to include it. In config/initializers/assets.rb or production.rb add:
Rails.application.config.assets.precompile << ['stats.js']
Hope it helps.
This post is pretty helpful to understand how the asset pipeline works: http://www.reinteractive.net/posts/116-12-tips-for-the-rails-asset-pipeline