I have a fresh rails project where I only generated a controller. I've followed the directions to install bootstrap according to the bootstrap gem, and I keep getting the following error:
ActionView::Template::Error (identifier '(function(opts, pluginOpts) {return eva
l(process' undefined):
5: <%= csrf_meta_tags %>
6: <%= csp_meta_tag %>
7:
8: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbol
inks-track': 'reload' %>
9: <%= javascript_include_tag 'application', 'data-turbolinks-track': '
reload' %>
10: </head>
11:
(execjs):1
app/views/layouts/application.html.erb:8:in `_app_views_layouts_application_html
_erb__511219785_80461480'
I've followed all the instructions according to this webpage: https://github.com/twbs/bootstrap-rubygem
My code:
# Gemfile
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
# app/assets/javascripts/application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .
# app/assets/stylesheets/application.scss
#import "bootstrap";
Note, I also did remove *= require and *= require_tree from the application.scss and I did make sure that it's a scss file and not a css file.
This seems to be a current issue with ExecJS and duktape on Windows.
See the following link for more information: https://github.com/twbs/bootstrap-rubygem/issues/157
In short, to resolve this issue you can simply remove/comment out duktape from your Gemfile. If you're going for Node.js as your JS runtime, remember to actually install it (Node.js).
If you still have problems, remove all //= require directives from your application.scss and keep those in application.js instead.
application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets
application.scss
#import "bootstrap";
Gemfile
Remove gem 'duktape'
gem 'autoprefixer-rails'
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
From a comment on the issue:
duktape has become the default JS Runtime in Windows sometime ago in
rails/rails#30014.
If you look into other similar issues involving Exejs you might found
out that duktape is actually the culprit (however its execjs here for
definition of duktape context). If you change your runtime environment
to use Nodejs, the error would be resolved, as the case with
#yasunari89
In config/boot.rb ENV['EXECJS_RUNTIME'] = 'Node'
You can find more info in #152 , #153 and #155 . However, above issues
with invalid regex was fixed with new version of duktape, for more
info visit judofyr/duktape.rb#41 The new version which resolved the
invalid regex issue , started causing issue which you are encountering
now. This issue happens because ( as defined in execjs) duktape
doesn't support complex contexts and full JS as identifier.
However a PR is under review that will possibly resolve the issue,
thanks to #judofyr
You should also make sure that your application.html.erb is setup correctly. Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>title</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>
<div class="container">
<%= yield %>
</div>
</body>
</html>
ExecJS supports several runtimes, not just duktape and NodeJS.
https://github.com/rails/execjs
ExecJS supports these runtimes:
therubyracer - Google V8 embedded within Ruby
therubyrhino - Mozilla Rhino embedded within JRuby
Duktape.rb - Duktape JavaScript interpreter
Node.js
Apple JavaScriptCore - Included with Mac OS X
Microsoft Windows Script Host (JScript)
Google V8
mini_racer - Google V8 embedded within Ruby
Related
My application has a lot of 3rd party js/css files. We sped up the deploy by compiling these files into external-[hash].js and external-[hash].css (So Rails don't have to compile these files on every single deploy)
And loaded them like this in application.html.erb
<%= stylesheet_link_tag "external", :media => "all" %>
<%= javascript_include_tag "external" %>
These two files are under /public/assets/. This was working fine when we are on Rails 4. We are currently trying to upgrade to Rails 5, and these two files are not loading properly.
I changed the tags into below and in the chrome console, these files appear to have been loaded properly.
<%= stylesheet_link_tag "/assets/external-[hash]", :media => "all" %>
<%= javascript_include_tag "/assets/external-[hash]" %>
However, when I add in the application style/js tags below the external tags
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
I keep getting the error
Error: "img" failed to #extend ".img-responsive".
The selector ".img-responsive" was not found.
Use "#extend .img-responsive !optional" if the extend should be able to fail.
Looking into the external-[hash].css, I am able to see the .img-responsive selector defined. So, it seems like Rails 5 does not properly load these two files?
I'm currently using Rails 5.1.7, Ruby 2.4.2
I also tried adding config.public_file_server.enabled = true to environment files.
Here are how I've setup the external files.
I have an external.js, and external.scss, these files live under app/assets.
Inside application.js/css, I added stub external to both, so when the rails application deploys, it ignored the external files. I would run RAILS_ENV=external_assets rails assets:precompile and commit those files to git, expecting them to be loaded first.
Example external.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.readyselector
//= require bootstrap
//= require bootstrap-datepicker
//= require moment
//= require d3
//= require c3
//= require jsgrid.min
//= require bootstrap-datetimepicker
external.css
/*
*= require_self
*= require bootstrap-datepicker
*= require bootstrap-datetimepicker
*= require rails_bootstrap_forms
*= require c3
*= require jsgrid.min
*= require jsgrid-theme.min
*/
#import "font-awesome-sprockets";
#import "font-awesome";
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import 'bootstrap-datetimepicker';
Please let me know if I can provide any other information.
Try some below commands
RAILS_ENV=production rails assets:clean
RAILS_ENV=production rails assets:clobber
And change in production
config.assets.compile = true
Then again run
RAILS_ENV=production rails assets:precompile
I am following screencast about twitter bootstrap basics to try to understand bootstrap more, but for some reason when I go to localhost, my app has no styling.
I have tried the steps from github repo https://github.com/seyhunak/twitter-bootstrap-rails as well.
I have also followed instruction from this SO post, but when I added the line *= require bootstrap_and_overrides, it shows FileNotFound error.
Here is what I did, after Rails new app bootstrap_practice:
rails g scaffold Product name price:decimal --skip-stylesheets
rake db:migrate
# added gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git' on gemfile (I have also tried just gem 'twitter-bootstrap-rails'
bundle install
rails g bootstrap:install
I checked assets and it has the necessary assets.
Stylesheets (application.css)
*
*= require_tree .
*= require_self
*/
JS:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
Lastly, my application.html.erb has
<%= csrf_meta_tags %>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
I am pretty sure that is everything needed. Why is my application on localhost not styled?
So, I've used twitter-bootstrap a lot of ways in Rails, and my favorite is with the bh gem. Bootstrap Helpers on github.
# Gemfile
gem 'bh'
# application.html.erb
<%= stylesheet_link_tag bootstrap_css %>
<%= stylesheet_link_tag font_awesome_css %>
<%= javascript_include_tag bootstrap_js %>
All the assets are delivered through the CDN.
An official SASS repo was released since the railscasts was released. (Rails comes with SASS out the box.)
https://github.com/twbs/bootstrap-sass
The repo by seyhunak is maintained in LESS, which requires therubyracer too.
In my new rails project, I add bootstrap css and javascript; but it doesn't work and class aren't add to pages.
I copy files in app/assets/javascripts and app/assets/stylesheets.
I add this file in application.html.erb like below:
<head>
<title>JiraAjax</title>
<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'bootstrap.min' %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'bootstrap.min' %>
<%= csrf_meta_tags %>
</head>
when I run project, I see both of file in html code in browser, but class aren't preview and doesn't work.
Other css is working, but bootstrap doesn't work.
I added pre-compile line for each file in application.rb, but the problem isn't solve.
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
app/assets/stylesheets/application.css:
*= require_self
*= require bootstrap-rtl.min
It's very strange for me, any one can help me?
You have to watch out for the load order of the assets that you're using. Depending on the specific situation, bootstrap should be loaded either before or after other assets.
Another issue I ran into was having either asset twice, which threw me off.
I'd suggest playing around with the order and making sure you don't have duplicate imports :) What I ended up doing was just hardcoding imports into my html.erb files instead of dealing with the asset-pipeline as a temporary workaround.
Now I have used couple of hours to integrate rails work together with angular, and I am about to give up. I am following this tutorial:
link to tutorial
'
and I made it even simpler
In my application.js I require the following :
//= require jquery
//= require jquery_ujs
//= require angular
in my main.js.coffe I ask to get the following js files :
#= require_self
#= require_tree ./controllers/main
and in my app/assets/javascripts/controllers/main/mainIndexCtrl.js.cofee I have the same lines as he does in tutorial :
#IndexCtrl = ($scope) ->
$scope.title = "My blog"
So here is the funny part :
my "Master" view is exactly the same as in tutorial :
<!DOCTYPE html>
<html ng-app>
<head>
<title>Blog</title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application", controller_name %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
So in theory when I run my app at http://localhost:3000/main/Index I should get the exact same result as he does, but no.
I am getting Runtime error, which says that it has failed at (in /app/assets/javascripts/main.js.coffee) and nothing else. I really can't figure out what exactly is going wrong. If I switch controller_name with some random string like 'hugabuga' page loads and of course angular wont work because there are no link to the controller Index.
I am not very experienced with cofee script, but maybe the way controller is defined is not correct?
In another tutorial I had to add another Gem
gem 'angular-rails-templates'
And also amend the application.js to include:
//= require jquery
//= require jquery_ujs
//= require angular/angular
//= require angular-route/angular-route
//= require angular-rails-templates
//= require_tree .
The order that the JS is listed is also important. Make sure you have the same in your file as what is shown in the video.
Does anyone know how to use YUI with Rails? If I call,
<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/build/menu/assets/skins/sam/menu.css">
it works. BUT if I use my own folder and do something like this,
<link rel="stylesheet" type="text/css" href="../../../vendor/yui/build/menu/assets/skins/sam/menu.css">
it does NOT work. These files, css and js, will not communicate with each other if dissected from their folders and placed adjacently under app/assets, the way Rails requires. I don't care about compressing and minimizing anything. I just want it to work.
In your application.html.erb layout
<%=stylesheet_link-tag "vendor/yui/build/menu/assets/skins/sam/menu.css"%>
One more suggestion is that please use app/assets/stylesheets folder put your menu.css there
and simply in your application layout
<%=stylesheet_link-tag "menu.css" %>
My solution was, in application.css,
*= require ../../../vendor/assets/yui/build/reset-fonts-grids/reset-fonts-grids
*= require ../../../vendor/assets/yui/build/menu/assets/skins/sam/menu
In application.js,
//= require ../../../vendor/assets/yui/build/yahoo-dom-event/yahoo-dom-event
//= require ../../../vendor/assets/yui/build/container/container_core
//= require ../../../vendor/assets/yui/build/menu/menu
And finally in application.html.erb, the layout,
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
I had a little trouble with js, enabled only on page refresh. But reinstalling gem 'turbolinks' magically fixed the problem. My files are just as I downloaded from Yahoo, no directory changes, under
/vendor/assets/yui
I hope nobody took my 'Java' sarcasm too seriously )