I am using Rails 5 with react-rails gem. I want to use server-side rendering, but I see this error:
React::ServerRendering::PrerenderError in Home#index
Encountered error "# ExecJS::ProgramError: TypeError: Cannot read property 'serverRender' of undefined" when prerendering Main with {}
This is my /assets/javascripts/application.js:
//= require rails-ujs
//= require jquery
//= require react
//= require react_ujs
//= require_tree .
This is javascripts/components.jsx:
class Main extends React.Component{
render(){
return (
<h1>Hello</h1>
);
}
}
and this is the view:
<%= react_component('Main', {}, {prerender: true}) %>
Without prerender option, everything works.
I've had a similar issue and here's how I solved it
run command rails generate react:install
This will create the components folder and some required files under your javascripts/ dir.
Now, place your components.jsx in /assets/javascripts/componets directory
refresh the page.
I'm running rails 4.2.10 and haven't tested rails 5 but I'm guessing this should do the trick.
Let me know how you get on
Related
I tried adding https://github.com/ejbeaty/CellEdit to my Rails application. The code in https://github.com/ejbeaty/CellEditworks works perfectly as standalone; but when I include celledit.js inside my Rails application, i get this error in my broswer development console:
TypeError: jQuery.fn.dataTable is undefined
While the same code works fine in standalone application, why am I getting this error in Ruby on Rails app? What does this error mean? And how do I resolve it?
NOTE:
The error is coming from the function definition shown below:
jQuery.fn.dataTable.Api.register('MakeCellsEditable()', function (settings) {
var table = this.table();
jQuery.fn.extend({
Add the jquery rails gem to your Gemfile:
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
Run run bundle install.
Then include the dependencies in the correct order in your app/assets/javascripts.js:
...
//= require jquery
//= require jquery.dataTables.min
//= require dataTables.cellEdit
//= require_tree .
//= require_self
In this case I just downloaded the files and placed them in app/assets/javascripts.
If you are using Turbolinks you want to hook the initialisation onto the turbolinks:load event as document.ready only happens on the initial page load:
//= require jquery
//= require jquery.dataTables.min
//= require dataTables.cellEdit
//= require_tree .
//= require_self
$(document).on('turbolinks:load', function(){
var table = $('#myTable').DataTable();
function myCallbackFunction (updatedCell, updatedRow, oldValue) {
console.log("The new value for the cell is: " + updatedCell.data());
console.log("The values for each cell in that row are: " + updatedRow.data());
}
table.MakeCellsEditable({
"onUpdate": myCallbackFunction
});
});
If you are not using Turbolinks then just use jQuery.ready(function(){...}) instead of $(document).on('turbolinks:load', function(){});.
In my file dances.html.erb, my test complains:
Failures:
1) Creating dances creates a new dance with non-javascript data
Failure/Error: visit '/dances/new'
Capybara::Poltergeist::JavascriptError:
One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details).
ReferenceError: Can't find variable: $
ReferenceError: Can't find variable: $
at http://127.0.0.1:33842/dances/new:81 in global code
I think the offending html code looks like
<script>
$( "#choreographer-autocomplete" ).autocomplete({
source: <%= a_to_safe_str(Choreographer.all.map &:name) %>,
autoFocus: true,
minLength: 0
});
$( "#start-type-autocomplete" ).autocomplete({
source: ["improper","Becket","Becket ccw","four face four","square dance","indecent"],
autoFocus: true,
minLength: 0
});
</script>
and the offending calls to '$' are here.
I think this means JQuery isn't loading?
If I snip them, then the next error is:
Failure/Error: JSON.parse self.figures_json
ActionView::Template::Error:
784: unexpected token at '{{toJson(figures.arr)}}'
Those handlebars are an Angular thing.
Is Angular also not loading?
Here's my Rails application.js:
//= require angular
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require_tree .
//= require jquery-ui/autocomplete
//= require angucomplete-alt
This works fine in the Real World, just not in this test.
Is there something I need to do to get these JS libs to load before the body html is executed?
Since you are running the latest PhantomJS the most likely cause is that you have an error in one of your JS files. A big difference between the dev and test environments is that in the test environment rails concatenates all your JS files together. This means that an error in one file can prevent the rest of the JS from being processed. In dev mode they're all separate so an error in one doesn't stop the others from being processed. Check your browsers console log for errors and make sure they are fixed.
I'm working with Rails 4 and AngularJS. I've got my app working. Controllers, directives, services, etc. However, my main app.js file refuses to fire the config and run functions. I've got some console.logs in there to test how far it gets. Here's the code:
angular-app/app.js
'use strict';
console.log('we see the app.js file'); // This works
var app = angular.module('bruno', [])
console.log(app) //This works
// This is where is stops working
app.config(function ($httpProvider) {
alert('config'); // Can't see this
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
})
app.run(function () {
console.log('App is running'); // Can't see this
});
Like I said, my other controllers are working just fine. The console doesn't show any errors and everything loads just as it should.
Rails application.js file:
//= require angular-app/app
//= require_tree ./angular-app/templates
//= require_tree ./angular-app/modules
//= require_tree ./angular-app/filters
//= require_tree ./angular-app/directives
//= require_tree ./angular-app/models
//= require_tree ./angular-app/services
//= require_tree ./angular-app/controllers
I've re-written this every which way I can think of, but to no avail. I'm kinda stumped. I've done it with and without the var app. Hoping this wonderful community can at least help me see something I can't.
Additional Info
I'm using gem 'angular-rails-templates'
Rails 4.2.3
AngularJS 1.3.16
If you need anything else from me just ask. Who knows, maybe by tomorrow morning I'll see things differently. :-)
As it turns out, I was mistakenly re-using the same module name inside another controller. Which was overwriting the module name in app.js. All fixed now.
I use react-rails gem and met specific trouble: prerendering doesn't work. I've wrote the code, but send an exception to me:
Encountered error "ReferenceError: Terminal is not defined" when prerendering Terminal with {}
Here is the sources of my code:
#= require jquery
#= require jquery_ujs
#= require turbolinks
#= require react
#= require react_ujs
#= require components
#= require_tree .
components.js.coffee
#= require_tree ./components
terminal.js.jsx.coffee
Terminal = React.createClass
render: ->
`<div>fffs</div>`
And the view:
= react_component 'Terminal', {}, prerender: true
I'm using default react-rails settings and don't know what's going wrong (I can't understand why react can't find a Terminal component).
Your using prerender: true for server rendering, therefore your need to make sure your component is globally accessible:
#Terminal = React.createClass
render: ->
`<div>fffs</div>`
Read more about it on react-rails documentation.
In the application.js file, I have the requirements, and the on JQuery declaration:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.pjax
//= require_tree .
jQuery ->
$('#id').pjax('[data-pjax-container]')
However, I am getting the error Uncaught SyntaxError: Unexpected token > in the console. The jquery.ja and jquery.pjax.js files are loading in the resources and network tab of the inspector, so i know it is at least getting the jquery and pjax.jquery code, however, the shortcut `jQuery -> to signify document.ready, throws the error.
When I switch the code to :
$(document).ready(function() {
$('#ce').pjax('[data-pjax-container]')
});
I don't get the error. What is the correct shortcut for document.ready in Rails? I was following the PJAX tutorial here that says to use this notation.
What your are typing is Coffeescript syntax, that's the reason why its a syntax error.