undefined method `javascript_pack_tag' for #<ActionView::Base:0x0000000000a730> - reactjs

I am currently working with webpacker currently shakapacker. The structure of my generated app using rails new react-app --webpack=reactis app/javascript/application.js and not as shown below
I have tried adding the packs folder manually. when I add <%= javascript_pack_tag 'hello_react' %> in app/views/layouts/applcation.html.erb it gives me this error
NoMethodError in Pages#index
Showing /home/gatwiri/react-app/app/views/layouts/application.html.erb where line #8 raised:
undefined method `javascript_packs_tag' for #<ActionView::Base:0x0000000000ae60>
Did you mean? javascript_path
controller generation
rails g controller pages index
/config/routes.rb
Rails.application.routes.draw do
root 'pages#index'
end
NB: expected output hello react
What I have tried
using tag instead of tag_pack

I downgraded my rails to rails 6.1.0 and restarted the project and everything worked okay

Related

AngularJS loaded twice with Rails asset pipeline

I have set up rails to use bower according to the following guide: http://joelencioni.com/blog/2014/01/03/integrating-bower-with-rails/
I have installed AngularJS and included it in my application.js file.
Now, when I run rake assets:precompile, I get the following error in the console:
WARNING: Tried to load angular more than once.
But my application continues to (seemingly) work fine. When I run rake assets:clobber, I no longer get the error.
I read through the many StackOverflow questions and answers relating to this error and still couldn't find a solution. ng-app is only declared once, there are no errors with my templates and how I include them, turbolinks is removed, etc.
What could cause this error when I compile my assets?
UPDATE: Some strange behaviour here... running the app in production with Passenger, the above error doesn't show up.

issue with running Angle - Bootstrap Admin app (angular-meteor version): TypeError: $browser.addPollFn is not a function angular-cookies.js:60

just purchased Angle - Bootstrap Admin app from wrapbootstrap
Tried to run the angular-meteor version of the app
The first issue was that meteor did not like the contents of the default index.html, so I renamed the file to be index.ng.html
Now the error I'm getting in the browser console is:
TypeError: $browser.addPollFn is not a function angular-cookies.js:60
What can be done to fix this?
Not sure about wrapbootstrap, but generally this error means you are using incompatible versions of angular and angular-cookies.
The external angular modules you use (e.g. ngAnimate, ngCookies, ngResource, ngRoute etc), should always be the same version as angular.
This issue can be Resolved by using same Version of angular.min.js and angular-cookies.js.
It always good to use same version of files

Extjs upgrade from 5.0 to 5.1 problems

I have an extjs 5.0 application that don't use the MVC model, ie: all the code is in one file called app.js.
I wanted to upgrade from version 5.0 to 5.1, What is the right way and steps to do so? knowing that I don't use index.html, instead I have a starting page called login.html.
I generated a new app with version 5.1, and modified the path from index.html to login.html, and replaced the ext folders the old with the new, and the build folders as well.
The error message chrome gives me is:
Uncaught TypeError: undefined is not a function
the error occurs in the file FocusManager.js, the line:
needListeners[i].addFocusListener();
The FocusManager is deprecated in Ext JS 5.1 (although the documentation does not reflect this clearly). Avoid using it.

Error after downloading HotTowel.Angular

I created an empty web solution, added an empty web application, used following NuGet command to download HotTowel.Angular template,
Install-Package HotTowel.Angular -pre
Executed the project and as soon as I run my web application it shows splash screen then, I get following error:-
{{VM.BUSYMESSAGE}}
Any idea why is that ?
I get the same error after updating to jQuery 2.1.3. I do not get this error with the default template issued version of 2.1.1.
UPDATE: It turns out I forgot to change the version in the script reference to jQuery on the index.html page to match the library. So check that out on your end and you should have your solution.
I have same problem. I tried both installing it via nuget package and package manager console. No Luck. Showing {{ VM.BUSYMESSAGE }} on screen. Error is showing $ is undefined. Looks like it is problem related to jQuery.
Unhandled exception at line 7, column 38 in scripts/bootstrap.js
0x800a139e - JavaScript runtime error: Bootstrap's JavaScript requires jQuery
index.html page contain:
<script src="scripts/jquery-2.1.1.js"></script>
Check your jQuery version and update to
<script src="scripts/jquery-2.1.N.js"></script>
//In my case
<script src="scripts/jquery-2.1.4.js"></script>

angular.js and phantom.js error

I am getting an error when i try running phantomjs via this stack: rails (3.2.11), rspec (2.12.2), capybara (1.1.4), poltergeist (1.0.2), phantomjs (1.8.1)
and angular.js (1.1.2).
I have many specs that run fine on this stack, without angular. But on a test page where I initiate angular, I get the follow error. When I run the specs using selenium driver, they pass.
{"name"=>"visit", "args"=>["http://127.0.0.1:57124/pages/angular"]}
{"response"=>{"status"=>"success"}}
{"name"=>"find", "args"=>["./descendant-or-self::*[contains(normalize-space(.), 'Hello')]"]}
{"error"=>{"name"=>"Poltergeist.JavascriptError", "args"=>[[{"message"=>"TypeError: 'undefined' is not an object (evaluating '$lastDestination.offset().top')", "stack"=>"TypeError: 'undefined' is not an object (evaluating '$lastDestination.offset().top')
at http://127.0.0.1:57124/assets/application.js:13100
at http://127.0.0.1:57124/assets/application.js:3046
at http://127.0.0.1:57124/assets/application.js:2722"}]]}}
This occurs even on the most bare bones content, only without any other ng directives (no controller instantiated etc), eg
<div ng-app>
<h1>Hello</h1>
</div>
The spec looks like
describe 'ng_posts', type: :request, js: true do
it "should load page" do
visit '/pages/angular'
page.should have_content('Hello')
end
end
This appears to be a phantom.js bug because the page loads in the browser (no errors in js console) and the specs run with Selenium. Is this a known issue? Can i get past it? Thanks.
Jon
nevermind.
Turns out it was a bug in another library, zurb-foundation (alternative to twitter bootstrap) which was fixed a week ago but the gem update didnt have it yet. Updating Gemfile as follows fixed it.
gem 'zurb-foundation', github: 'zurb/foundation'

Resources