I just started to learn implementing react on rails following a tutorial. There were similar questions asked earlier and I tried those solutions, but they didn't seem to work.
I installed react-rails gem.
And added following lines to appication.js
application.js
//= require jquery
//= require jquery_ujs
//= require react
My rails version is 5.1.4 and jQuery version is 1.12.4
I am just trying to get a simple Hello React as follows.
index.html.erb
<div id="react"></div>
main.jsx
let documentReady = () => {
React.render(
<h1>Hello React</h1>,
document.getElementById('react')
);
};
$(documentReady);
At first I was getting a Uncaught TypeError: $ is not a function then I added the following line on the top of main.jsx
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Then I started getting Uncaught ReferenceError: React is not defined
So instead of a plain Hello React I am getting all of these errors. Help would be much appreciated.
Related
Trying to get a (what should be) simple module to work: metisMenu
However, unfortunately I'm failing in doing so, apparently something in my Webpacker setup because when loading my page I get the error: Uncaught TypeError: $(...).metisMenu is not a function
There is an issue in loading the module in application.js. The module is being loaded in vendor/assets/javascripts/app.js
I have jQuery correctly installed
the following snippet into the head section makes it work (but this is without the use of Webpaker):
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/metismenu"></script>
.
I've created a github branch. Please help! https://github.com/henkjanwils/metisMenu-error
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
Trying to implement D Wilhem's Leaflet Slider, a front end to the JQuery UI slider in Rails. I get the error ReferenceError: Can't find variable: L. I've looked at lots of discussions and imagine I've mixed up my syntax. The page loads and 1) my data shows up, 2) the slider control shows up, but the slider doesn't function and I get then aforementioned error.
function makeMap() {
L.mapbox.accessToken = $('body').data("mapboxToken");
var map = L.mapbox.map('map', 'mtnbiker.d7jfhf8u') // Was: mapbox.streets
.setView([34.040951, -118.258579], 13);
L.control.fullscreen().addTo(map);
var featureLayer = L.mapbox.featureLayer()
.loadURL('map/point_data.geojson')
.addTo(map);
var featureLayer = L.mapbox.featureLayer()
.loadURL('map/line_data.geojson')
.addTo(map);
var sliderControl = L.control.sliderControl({range: true, alwaysShowDate: true, timeStrLength: 10, layer: featureLayer});
map.addControl(sliderControl);
sliderControl.startSlider();
$('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 10));
featureLayer.on('ready', function(e) {
map.fitBounds(featureLayer.getBounds());
});
}
application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require 'leaflet.js'
//= require leaflet
//= require_tree .
The map loads with data (points and lines) and non-functioning slider at localhost. Points are loading at Heroku, but not the lines nor slider. https://secure-shore-68966.herokuapp.com/map.
Answer:
After weeks of trying different things, a friend from MaptimeLA was able to sit down with me at a meeting and found a type. She is very familiar with Rails and debugging.
application.js was:
// require jquery.ui
// require jquery.ui.widget
Fixed
//= require jquery-ui
//= require jquery.ui.widget
Thanks to all who chimed in.
All the code is at https://bitbucket.org/MtnBiker/crores5/.
PS. I can't see the checkbox to say I want to answer my own question.
Looking at your code in the link, you load the following scripts in this order:
<script src="/assets/application-665a36b2268b441400787c68e9f08977c28cc33814ce32a46439c27016b720ec.js" data-turbolinks-track="true"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.2.4/mapbox.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
I suspect that something is loading out of order or that L is being dropped someplace. Also I do not see where the core jQuery is being loaded.
Looking at the Demo, they load the following:
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js" type="text/javascript"></script>
So I think all you're missing is the core jQuery and Maybe the LeafletJS. Here is a working JSFiddle based on the example they provide.
https://jsfiddle.net/Twisty/sr0sjzk2/
This is not a complete answer. But working through the asset pipeline in Rails and making changes I've eliminated the error. The problem was probably that in using various tutorial, I'd put in different versions of Leaflet or jQuery in different places in the Ruby on Rails app.
However the page still doesn't work correctly. I get TypeError: $("#leaflet-slider").slider is not a function. (In '$("#leaflet-slider").slider', '$("#leaflet-slider").slider' is undefined) error on localhost. The error is in D Wilhelm's SliderControl.js. On Heroku, no errors but no slider. I'll post a new question. https://secure-shore-68966.herokuapp.com/map.
Thank you Twisty for your help.
I'm getting the following error and I cannot understand why. I tried my best to change/check the origin of the error, but for me everything seems to be correct. And this error happens only in production, in development it works fine.
#error
Uncaught Error: [$injector:modulerr] Failed to instantiate module recipeApp due to:
Error: [$injector:nomod] Module 'recipeApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
#app.js
var mod = angular.module('recipeApp',[]);
#application.js
//= require jquery
//= require jquery_ujs
//= require pixel-admin.min
//= require app
#config/initializers/productio.rb
config.assets.compile = false
config.assets.precompile = ['*.js', '*.css']
config.assets.js_compressor = Uglifier.new(:mangle => false)
config.assets.js_compressor = :uglifier
#app/views/layout/application.html.erb
<body class="theme-default no-main-menu main-navbar-fixed" ng-app="recipeApp">
and when I check the source via firebug, I can see recipeApp in both js and html
I'm using
Rails 4.1.5
Angularjs 1.2.13
UPDATE
For routing I'm using ui.router, how ever I tried to add that as well, but still the same
#app/views/layouts/application.html.erb
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
in my
app/assets/javascripts/app.js
'use strict';
angular.module('recipeApp',["ui.router"]);
I also ran into this issue and found the solution here: https://teamgaslight.com/blog/4-lessons-learned-doing-angular-on-rails. Thought I'd share for anyone that runs into this issue even though this question is fairly old.
Rails in production automatically minifies variables which messes up Angular.
So in config/environments/production.rb, add this line before end:
config.assets.js_compressor = Uglifier.new(mangle: false)
Your app needs to be on Rails 4+
Uncaught Error: [$injector:modulerr] This error occurs when you not supplied ngRoute dependency in newer versions of angular.
You have to provide ngRoute dependency in your module as it's separate module in new angular versions.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.min.js"></script>
var app = angular.module('recipeApp', ['ngRoute']);
I'm having a problem with the fullcalendar js which we use directly through the plugin (not the gem which is currently version incompatible anyway).
I'm upgrading rails from v3.2.6 to v3.2.8
fullcalendar is displaying the calendar ok but clicking to edit a date has a messed up ui (the action button are missgin their labels and there is no 'x' close link) and clicking to add a new event doesn't respond at all (as it's generating js errors).
I am getting these javascript errors:
Edit Event:
Uncaught TypeError: Object function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
} has no method 'curCSS'
New event:
Uncaught SyntaxError: Unexpected token N
Our code:
LISA.dayClickHandler = function(day, allDay, jsEvent, view) {
$('#event_error_container').hide();
var hours = JSON.parse(day.getHours());
fullcalendar list the jquery-ui version for it as jquery-ui 1.8.23
However the jquery version in my application's vendor/assets/javascripts is 1.8.13 (I see this by literally opening up the file and looking at the comments at the top).
My own app/assets/javascripts library does not have any jquery.js or jquery_ui.js
My app/assets/javsacript directory has application.js which includes
...
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
// more libraries
//= require jquery-ui
//= require jquery-autoSuggest.packed
...
Perhaps it might help to change my apps jquery-ui version from 1.8.13 to 1.8.23 to see if this resolves my issues but I am not sure of the right approach to do that.
This was a jquery-ui change ('curCSS' was removed) that was reversed (it was added back).
http://bugs.jquery.com/ticket/11921
The resolution was to download jquery-ui version 1.8.23 to vendor/assets/javascripts to replace the older version (1.8.11) and restart the server.