To preface my question, I am following this guide.
When trying to build a CRUD interface using Rails and React, I receive this error when trying to create a new item:
addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded.
I wasn't improperly adding a ref attribute to any JSX not inside of a render method, so I must have multiple copies of React within my asset pipeline.
Research yielded the following potential results:
Introducing webpack or Searchkit, suggested in this SO answer, seemed to be clunky workarounds for my simple CRUD interface.
This unselected SO answer suggested removing the //= require react line from ./app/assets/javascripts/application.js. This proved to be unsuccessful.
Issue #671, from the official GitHub react-rails repo. here, outlines the first part of my issue perfectly. I followed this potential solution, which suggests removing the //= require react-server line of the ./app/assets/javascripts/server_rendering.js file. This lead to a new error, outlined below:
Uncaught ReferenceError: $ is not defined
Which I assume means that react_server not only contains a second copy of React, but also loads something vital for my AJAX calls.
For reference, here are the contents of ./app/assets/javascripts/application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
...
// about supported directives.
//
//= require rails-ujs
//= require react
//= require components
//= require turbolinks
//= require_tree .
and ./app/assets/javascripts/server_rendering.js:
//= require react_ujs
//= require react-server
//= require ./components
...
Where a set of ellipses, or ..., are used to shorten known comment sections.
Ruby version: 2.3.3p222 (2016-11-21 revision 56859)
Rails version: 5.1.1
react-rails version: 2.2.0
The third potential answer, or removing the //= require react-server from ./app/assets/javascripts/server_rendering.js, was a step in the right direction.
Removing this line doesn't yield a new issue, it just reveals another error you had the entire time. react_server doesn't define the $ variable for AJAX calls, the jQuery gem does.
Found here. I am confident in this solution because the error:
Uncaught ReferenceError: $ is not defined
is a jQuery issue, as the AJAX calls you are probably making take a form referenced in their official doc. here.
Therefore, after running gem install jquery-rails in your shell, your ./app/assets/javascripts/application.js should look like this:
...
//= require rails-ujs
//= require jquery
//= require react
//= require components
//= require turbolinks
//= require_tree .
Your ./app/assets/javascripts/server_rendering.js file should look like this:
//= require react_ujs
// require react-server
//= require ./components
...
Note that require react-server is commented out.
And make sure to follow the solution found in this SO answer regarding the .\app\views\layouts\application.html.erb file.
Related
I am using react-rails gem and Rubymine. After rails g react:install, my application.js file looks like this:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require_tree .
Everything except //= require react is recognised. Rubymine tells me Cannot resolve file or directory "react".
When I look at my Rails.application.config.assets.paths, I see my react gem path and I can find react_ujs.js.erb there, but no react.js* file. Is this some kind of bug with the react-rails gem?
What would be the proper way of fixing this?
EDIT: According to the react-rails documentation section on react builds, the right react build can be selected by assigning the environment symbol in the appropriate environment file. Doing so still doesn't resolve the Rubymine warning, but copying the react.js file into one of the assets path location does. It seems like something react-rails doesn't do very well with Rubymine.
I am trying to get rangeslider.js working in Ruby on Rails. I have used their GitHub page as a reference, but couldn't find any help for Rails.
http://andreruffert.github.io/rangeslider.js/
Application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require rangeslider.js
//= require rangeslider.min.js
//= require_tree .
I came across the following error message
Sprockets::FileNotFound
(in C:/Users/rmatthews/Documents/repos/pcbuilder/app/assets/javascripts/application.js:17)
Line 17, was //= require rangeslider.min.js
The files are located on my computer, but in my /downloads/rangeslider.js-0.3.7 directory
My guess is that Rails does not search that directory.
Do I need to place them somewhere else, like /vendor/assets?
I've been following this as a Reference, but couldn't find much
http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline
I've seen a couple of similar questions, but since they were discussing jquery, they didn't seem to be of much help.
Rails does not search random directories that exist outside of your application. You will need to place this file at vendor/assets/rangeslider.js.
Then require it by:
//= require rangeslider
my app's working directory looks something along the lines:
app
-assets
-javascripts
- theme
--jquery.min.js
--excanvas.min.js
-- application.js
The application.js previously had require_tree ., however, it loaded excanvas.min.js before jquery.min.js. This brought up a javascript error. I would like to switch the load order. So I updated application.js to:
//= require unicorn/jquery.min
//= require unicorn/excanvas.min
However, this gave me the following error:
Sprockets::FileNotFound in Admin::Home#index
couldn't find file 'unicorn/jquery.min.js'
I was wondering why I can't seem to find jquery.min. Any ideas?
Thanks!
I changed the application.js to:
//= require ./unicorn/jquery.min
//= require ./unicorn/excanvas.min
and it seemed to work.
This is likely a simple case of bringing external scripts with dependencies into Rails.
I'm trying to get my Adobe Edge generated Animations to work within my Rails app and the first step is to include all of Adobe Edge's generated js files, but so far I'm just getting a bunch of 404 Not Found Errors for all of the Edge files I've included in the Application.js file.
Here's my Application.js file
//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require california_internet
//= require hero_edgePreload
//= require edge_includes/edge.1.5.0.min
//= require hero_edge
//= require hero_edgeActions
Here is how Edge's Preloader.js is trying to find some of the files...
aLoader=[{load:"edge_includes/jquery-1.7.1.min.js"},{load:"edge_includes/edge.1.5.0.min.js"},{load:"hero_edge.js"},{load:"hero_edgeActions.js"}]
The way I got this to work was change hero_edgePreload.js to hero_edgePreload.js.erb
And change:
aLoader=[
{load:"edge_includes/jquery-1.7.1.min.js"},
{load:"edge_includes/edge.1.5.0.min.js"},
{load:"hero_edge.js"},
{load:"hero_edgeActions.js"}
];
To:
aLoader=[
// {load:"edge_includes/jquery-1.7.1.min.js"}, Already required in application.js
{load:'<%= asset_path("edge.1.5.0.min.js") %>'},
{load:'<%= asset_path("hero_edge.js") %>'},
{load:'<%= asset_path("hero_edgeActions.js") %>'}
];
You can remove any Adobe Edge JS files from your requires in application.js too.
You'll have to add asset_path to any images in hero_edge.js and change it to hero_edge.js.erb too.
If there's an easier way, I'd love to know it :)
The solution of Michael Johnston of changing Edge's aLoader paths works, but gives errors. While on localhost, I would get Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong. on random basis, while after deployment to Heroku at every page refresh.
Additionally, my app depends on jQuery already in higher version - therefore adding the one from Edge animation could possibly cause conflicts.
After trial and error(s) I decided to use this solution:
place the whole animation into /public/edge folder
put the animation into an iframe: <iframe class="animation-container" src='/edge/animation.html' />
Not the most elegant one, but certainly saves a lot of headaches.
I'm following this tutorial and although adding it to the Gem file and bundle installing it works fine. The moment I try to include it into application.js, the file, I get the following error while loading it:
throw Error("Sprockets::FileNotFound: couldn't find file 'angular'\n (in /my/path/to/rails/app/assets/javascripts/application.js:13)")
application.js file looks like so (starting with line 13):
//= require angular
//= require jquery
//= require jquery_ujs
//= require jquery.ui.autocomplete
//= require bootstrap
//= require pusher.min.js
//= require pusher_setup
//= require_directory .
Therefore, my question is how can I successfully include AngularJS into my Rails project?
I'm currently using Rails 3.2.2, and Ruby 1.9.3.
I had face same problem. I resolved it by following way.
1) In my case, //= require_tree . was missing in application.js file.. so i have added it.
2) Restarted Apache Server (If webrick, then restart it)
After adding a gem you always have to restart the web server.
From looking at the gem's source code, it has the angular javascripts in vendor/assets/javascripts, which means they will be available by just doing //= require angular. If they don't load, it's probably because the server needs to be restarted and you need to bundle install.
As for the require_tree ., I strongly advise against that, because it means you will lose control over the order in which things get loaded.
For example angular itself is packaged with it's own version of jQuery (jQuery-lite), but if there is already jQuery present when it is loaded, it will use the global version.
Which means doing
//= reqiure angular
//= require jquery
will do something different, than
//= require jquery
//= require angular
There are many other cases when load order can matter, for example if you have Backbone.js and Underscore, you will want to load Underscore before Backbone, etc.
As a general practice I would always recommend just using require, unless you're loading your own code where order doesn't matter, for example //= require_tree ./controllers for your own directory of controllers. In that case I'd say require_tree is perfectly ok.
in your gemfile if you are using like this :
group :assets do
gem 'angularjs-rails'
end
then remove that group :assets thing, It should be simple without block:
ex:
gem 'angularjs-rails'
It will definitely work
In case anyone had a same issue and the offered solution wouldn't work.
I have added //= require angular in the asset
group :assets do
//= require angular
end
However still I was getting the same error. After a bit of search I found out that for some reason it needs to be added outside of the assets group. All good now. Not sure if this is a best way though however I am not getting this error anymore.