First of all, this is not a duplicate! It's the same 'not defined' error but follows exactly the github (https://github.com/reactjs/react-rails) guide and still not working
Gemfile:
gem 'rails'
gem 'pg', '~> 0.15'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'therubyracer'
gem 'bootstrap-sass'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'font-awesome-sass'
gem 'sprockets-rails'
gem 'react-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
application.js:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap-sprockets
//= require react
//= require react_ujs
//= require components
application.html:
<!DOCTYPE html>
<html>
<head>
<title>project</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'react' %>
<%= csrf_meta_tags %>
</head>
<body>
components/app.js.jsx:
// var React = window.ReactRailsUJS;
var Hello = React.createClass({
render: function() {
return (
<p>Hello</p>
);
}
});
ReactDOM.render(
<Hello />,
document.getElementById("react-msg")
);
console.log(1);
html file:
<style type="text/css">
h1, h3 {
font-weight: bold;
}
</style>
<div class="container">
<h1>React JS</h1>
<h3 id="react-msg"></h3>
</div>
development.rb:
Rails.application.configure do
...
# config/environments/development.rb
config.react.variant = :development
# to include react add-ons
config.react.addons = true # defaults to false
end
When I visit the page it says
ReferenceError: React is not defined
What I did wrong?
If I uncomment the following
var React = window.ReactRailsUJS;
it says createClass is not a function and same for every other React function
For anyone that runs onto this issue and lands here, apparently it is a problem beginning with version 16 onward of React. The reason is cause React.createClass is deprecated. Instead, you're supposed to use createReactClass.
Much of the (now old) documentation provided an example like this:
var HelloMessage = React.createClass({
render: function() {
return (
<h1>Hello {this.props.name}!</h1>
)
}
});
Instead, you should use this:
var HelloMessage = createReactClass({
render: function() {
return (
<h1>Hello {this.props.name}!</h1>
)
}
});
I can only assume they didn't update their examples, and many of them are still showing up when you search for react-rails as of Nov-2017.
Related
Receiving an error (ExecJS::ProgramError in Pages#home) when I run rails server and load my page after I install bootstrap 4 ruby gem.
Completely new to Ruby on rails and largely programming so bear with me. I'm running through the One month rails tutorial (https://onemonth.com/courses/rails/curriculum) and hitting a sticking point at the installing bootstrap 4 point. I'm using windows 10 vs Mac OS for the tutorial.
I've tried running through the same directions for installing bootstrap 4 as the course uses (https://www.diycode.cc/projects/twbs/bootstrap-rubygem) as well as the latest directions (https://github.com/twbs/bootstrap-rubygem). I get the same error either way, but my latest attempt runs through the steps below.
Steps
Add bootstrap to your Gemfile:
gem 'bootstrap', '~> 4.2.1'
bundle install
Import Bootstrap styles in app/assets/stylesheets/application.scss:
// Custom bootstrap variables must be set or imported *before* bootstrap.
#import "bootstrap";
renamed application.css to application.scss in app/assets/stylesheets/
add the jquery-rails gem to your Gemfile:
gem 'jquery-rails'
bundle install
Add Bootstrap dependencies and Bootstrap to your application.js:
//= require jquery3
//= require popper
//= require bootstrap-sprockets
I've also tried removing
gem 'duktape'
from my gemfile as has been suggested elsewhere but had no luck.
Gemfile
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.3.3'
gem 'rails', '~> 5.2.2'
gem 'sqlite3'
gem 'puma', '~> 3.11'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'duktape'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'jquery-rails'
gem 'bootsnap', '>= 1.1.0', require: false
gem 'bootstrap', '~> 4.2.1'
group :development, :test do
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
gem 'web-console', '>= 3.3.0'
end
group :test do
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
gem 'chromedriver-helper'
end
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
application.scss
// Custom bootstrap variables must be set or imported *before* bootstrap.
#import "bootstrap";
application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
pages_controller.rb
class PagesController < ApplicationController
def home
end
end
application_controller.rb
class ApplicationController < ActionController::Base
end
home.html.erb
<h1>Welcome to my website!</h1>
<p>Sign up here</p>
<p>Teams</p>
<p>Standings</p>
<p>Schedules</p>
<p>Stats</p>
When I run rails server the page comes up saying "ExecJS::ProgramError in Pages#home"
Showing C:/omrails/app/views/layouts/application.html.erb where line #8 raised:
undefined not callable
Rails.root: C:/omrails
(execjs):1
app/views/layouts/application.html.erb:8:in `_app_views_layouts_application_html_erb__882755417_31415124'
My code in views/layouts/application.html.erb looks as follows:
<!DOCTYPE html>
<html>
<head>
<title>One Month Rails</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>
<%= link_to "Home", root_path %>
<%= link_to "About", about_path %>
<%= link_to "Contact us", contact_path %>
<%= yield %>
</body>
</html>
I am trying to use the jQuery datepicker function but I am receiving an error Uncaught type error: $(...).datepicker() is not a function. I have gone through my files and do not see a double reference to jQuery or incorrect file order in the application.js. Could someone help point out what might be the problem?
application.html.erb
<!DOCTYPE html>
<html>
<head>
<%= javascript_include_tag 'application' %>
<title>MyApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS/Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<%= stylesheet_link_tag 'application' %>
<%= csrf_meta_tags %>
<!-- -->
</head>
<body>
<%= render partial: "shared/top_info" %>
<%= yield %>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">
</script>
<!-- -->
</body>
</html>
application.js
//= require jquery
//= require jquery_ujs
//= require ahoy
//= require_tree .
$('#customer_drop_off_date').datepicker();
html.erb
<% form_tag('/post') do %>
<%= text_field_tag(:customer_drop_off_date) %>
<% end %>
Gemfile
source 'https://rubygems.org'
gem 'rails', '4.2.6'
gem 'pg', '~> 0.15'
gem 'uglifier', '>= 1.3.0'
gem 'jquery-rails'
gem 'jbuilder', '~> 2.0'
gem 'sprockets'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'bcrypt', '~> 3.1.7'
gem 'devise'
gem 'figaro'
gem 'paperclip', '~> 5.0.0.beta1'
gem 'ahoy_matey'
gem 'geocoder'
group :development, :test do
gem "pry"
gem "pry-rails"
gem "pry-stack_explorer"
gem "pry-byebug"
gem 'byebug'
end
group :development do
gem 'web-console', '~> 2.0'
gem 'spring'
end
Include gem 'jquery-ui-rails' into your gemfile.
To require all jQuery UI modules, add the following to your application.js:
//= require jquery-ui
Into your stylesheets:
/*
*= require jquery-ui
*/
Gem docs
Using https://github.com/TrevorS/bootstrap3-datetimepicker-rails
In Gemfile:
gem 'momentjs-rails', '>= 2.9.0'
gem 'bootstrap3-datetimepicker-rails', '~> 4.17.37'
Run:
bundle
Bootstrap CSS options (choose one):
CDN in .erb as shown in question
Rails Asset Pipeline https://github.com/seyhunak/twitter-bootstrap-rails
Install into vendor/assets/ as described here: http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application
In application.css after bootstrap require:
*= require bootstrap-datetimepicker
In application.js:
//= require jquery
//= require jquery_ujs
//= require ahoy
//
// NEW (add these two lines)
//= require moment
//= require bootstrap-datetimepicker
//
//= require_tree .
// OLD
//$('#customer_drop_off_date').datepicker();
// NEW
$('#customer_drop_off_date').datetimepicker();
I've got a Rails 4.2 app that I've deployed with Heroku and I've tried to add Google Analytics to it. However, Google Analytics isn't picking up any sessions.
Any suggestions why and how to resolve this?
CODE
/app/layouts/_footer.html.erb:
<% if Rails.env.production? %>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'herokuapp.com');
ga('send', 'pageview');
</script>
<% end %>
/app/layouts/application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<%= Gon::Base.render_data({}) %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<%= yield %>
</div>
<%= render 'layouts/footer' %>
</body>
</html>
/app/assets/javascripts/analytics.js.coffee:
$(document).on 'page:change', ->
if window._gaq?
_gaq.push ['_trackPageview']
else if window.pageTracker?
pageTracker._trackPageview()
/app/assets/javascripts/application.js:
//= require jquery
//= require analytics
//= require bootstrap
//= require jquery_ujs
//= require jquery.ui.all
//= require Chart
//= require jquery.turbolinks
//= require lodash
//= require_tree .
Gemfile:
source 'https://rubygems.org'
gem 'rails', '4.2.2'
gem 'bootstrap-sass', '3.2.0.0'
gem 'sass-rails', '5.0.2'
gem 'uglifier', '2.5.3'
gem 'coffee-rails', '4.1.0'
gem 'jquery-rails', '4.0.3'
gem 'jquery-ui-rails', '~> 4.2.1'
gem 'turbolinks', '2.3.0'
gem 'jquery-turbolinks'
gem 'jbuilder', '2.2.3'
gem 'sdoc', '0.4.0', group: :doc
gem 'chart-js-rails'
gem 'gon'
gem 'lodash-rails'
group :development, :test do
gem 'sqlite3', '1.3.9'
gem 'byebug', '3.4.0'
gem 'web-console', '2.0.0.beta3'
gem 'spring', '1.1.3'
end
group :production do
gem 'pg', '0.17.1'
gem 'rails_12factor', '0.0.2'
end
The way you are adding your script is the wrong way, since it will not work due to Turbolinks, you know the code you have in your _footer won't be running as expected since that piece of markup won't reload because of Turbolinks.
I will give you my custom implementation of google analytics for all my rails apps.
In your app/assets/javascripts create a new file called google_analytics.js.coffee and add the following script:
class #GoogleAnalytics
#load: ->
# Google Analytics depends on a global _gaq array. window is the global scope.
window._gaq = []
window._gaq.push ["_setAccount", GoogleAnalytics.analyticsId()]
# Create a script element and insert it in the DOM
ga = document.createElement("script")
ga.type = "text/javascript"
ga.async = true
ga.src = ((if "https:" is document.location.protocol then "https://ssl" else "http://www")) + ".google-analytics.com/ga.js"
firstScript = document.getElementsByTagName("script")[0]
firstScript.parentNode.insertBefore ga, firstScript
# If Turbolinks is supported, set up a callback to track pageviews on page:change.
# If it isn't supported, just track the pageview now.
if typeof Turbolinks isnt 'undefined' and Turbolinks.supported
document.addEventListener "page:change", (->
GoogleAnalytics.trackPageview()
), true
else
GoogleAnalytics.trackPageview()
#trackPageview: (url) ->
unless GoogleAnalytics.isLocalRequest()
if url
window._gaq.push ["_trackPageview", url]
else
window._gaq.push ["_trackPageview"]
window._gaq.push ["_trackPageLoadTime"]
#isLocalRequest: ->
GoogleAnalytics.documentDomainIncludes "local"
#documentDomainIncludes: (str) ->
document.domain.indexOf(str) isnt -1
#analyticsId: ->
# your google analytics ID(s) here...
'UA-xxxxxxxx-x'
GoogleAnalytics.load()
As you can see it adds support for Turbolinks, this is a clean and better way to add Google analytics to your app. Hope it works for you.
Any ideas whats happening? I installed Highcharts in windows and worked but now in Ubuntu is not working.
This is my application.html.erb file.
{
<!DOCTYPE html>
<html>
<head>
<title>Highchartstest1</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
}
{application.js}
{// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require highcharts
//= require_tree .
}
This is the example code to plot in {index.html.erb}
{<h1>Welcome#index</h1>
<p>Find me in app/views/welcome/index.html.erb</p>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
}
The {gemfile} is the following:
{source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
#gem 'spring'
end
}
I would appreciate any help.
Try remove the line //= require highcharts from your css manifest.
You have included the highcharts as a remote file in your application.html.erb file (<script src="http://code.highcharts.com/highcharts.js"></script>), then you shouldn't require it in your manifest file. That is, you're trying to require a file that doesn't exist.
make sure you don't have the js and css file of the same name. I faced this error when I had.
I have a Rails 3.1 app that uses the foundation-rails gem and the jquery-rails gem and everything seems to be working. I tried to add the jquery-ui-rails gem to the mix and ran bundle install and everything looks good. Here is the relevant part of my gemfile:
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'sqlite3'
gem 'mysql2'
gem 'devise'
gem 'omniauth'
gem 'omniauth-facebook', '1.4.0'
gem 'omniauth-google-oauth2'
gem 'jquery-rails'
gem 'json'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.1.4'
gem 'coffee-rails', '~> 3.1.1'
gem 'uglifier', '>= 1.0.3'
gem 'foundation-rails'
gem 'jquery-ui-rails'
end
Here is application.js:
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require foundation
//= require_tree .
$(function(){ $(document).foundation(); });
Here is application.css:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require foundation_and_overrides
*= require_tree .
*/
/*
*= require jquery.ui.all
*/
I have a page that includes the following code:
<ul id='sortable_list'>
<% #list.items.each do |item| %>
<li><%=item.name%></li>
<%end%>
</ul>
</div>
</div>
<script>
$(function() {
$( "#sortable_list" ).sortable();
$( "#sortable_list" ).disableSelection();
});
</script>
The list is not sortable when the page loads and I get a "Uncaught ReferenceError: $ is not defined". I'm at my wits end - help, please!
OK, so the issue was the current version of Foundation (5.0.2). The documentation says that its script tag should be placed right before the closing tag. I put my script_tag for application.js there and, apparently, jQuery likes to be loaded in the head. So I moved //= require foundation out of application.js, moved <%= javascript_include_tag "application" %> back to the head, and added <%= javascript_include_tag "foundation" %> by itself at the bottom of the document. I figure this will work until they fix the bug in 5.0.2 that requires that it be loaded at the end of the body.