I updated my app to Rails 7 and moved it from webpacker to shakapacker.
It is mostly a react frontend, with some old pages in haml with jquery listening on js files in app/assets.
Shakapacker and react front end is working properly, the rails views load (they don't even need webpacker running), but the jquery listeners are not running/listening to the rails views.
app/assets/javascripts/application.js
Is loading up, I can see through logging to the console.
The file looks like this:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
console.log('Hello World from Webpacker 2')
// = require jquery-3.3.1.min
//= require popper
//= require rails-ujs
//= require cable
//= require jquery-ui
//= require activestorage
//= require bootstrap
//= require bootstrap-select
//= require moment
//= require tempusdominus-bootstrap-4
//= require jquery.easy-autocomplete.min
//= require jquery.slimscroll.min
//= require patch_modal
//= require_tree
React app is loaded up when rails routes using the react frontend are hit with:
<%= javascript_pack_tag 'react_app', crossorigin: "anonymous" %>
<%= stylesheet_pack_tag 'react_app', crossorigin: "anonymous" %>
Is there something else I need to configure to get my js files in app/assets/javascripts/*.js to compile with shakapacker?
I felt like it just worked with webpacker, I also tried a few other compilers (jsbuild, vite) and it was fine as well. I had to stop with them for other issues on my React side.
Any advice or pointers are super appreciated. I feel like I have spent way too long on making Rails 7 happy with the front end.
Thanks!!
app/
├─ assets/ # used by sprockets-rails
│ └─ javascripts/ # not used in rails 7 by default
│ └─ application.js # javascript_include_tag "application"
│
└─ javascript/ # used by shakapacker and other js bundlers
├─ packs/ # webpack entries
│ └─ application.js # javascript_pack_tag "application"
│
└─ application.js # or this one (depending on `source_entry_path` in config/webpacker.yml)
Shakapacker should not process assets/javascripts/application.js, because it doesn't know how to process //= require directives. They are handled by sprockets.
To load assets/javascripts/application.js, add this to your layout:
<%= javascript_include_tag "application" %>
and double check manifest.js, it should have application.js:
//= link application.js
Sprockets //= require with jsbundling-rails (esbuild) - how to include JS provided by gem?
Sprockets directives are processed only at the top of the file:
// This is processed by sprockets and popper is required.
//= require popper
console.log("loaded")
// After any code, it is a regular comment, nothing happens.
//= require popper
https://github.com/rails/sprockets#directives
Related
I previously found help here for how to hide and show form fields based on whether a radio button in the same form is set to true or false.
This works fine in my development environment.
I just pushed to heroku and have checked the production version. Nothing happens when I select the true button in the form field that is supposed to reveal the hidden fields.
Others who have had similar issues describe this as a problem attributable to not precompiling assets.
Here is my setup.
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require underscore
// require gmaps/google
//= require markerclusterer
//= require cocoon
//= require_tree .
I expect that require_tree will pick up all of the files saved in my app/javascripts directory.
The js that solved the initial problem I posted about in my linked post is saved in app/javascripts/stances/commercial.js.
production.js
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true
# `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
initializers/assets.rb
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )
When I push to heroku, I can see from the log that the precompile does happen:
Preparing app for Rails asset pipeline
remote: Running: rake assets:precompile
remote: Asset precompilation completed (3.51s)
The heroku docs say that I shouldn't need to manually precompile assets because it's done on deployment. That makes sense because the above log shows that it is happening. Is there something else I need to be doing to make heroku pick up my js files in production?
This post suggests that Heroku doesnt precompile if there is a public/assets/manifest.yml file in the repo. There is no such file in my application, so i'm expecting that heroku is compiling my assets. It looks from the log (copied above) that it has - so I'm confused about whether I'm supposed to precompile assets before pushing to production or rely on the process that Heroku is supposed to be doing.
in my ror application i've a jquery error during the execution. On the Google Chrome Application appear this message
Uncaught ReferenceError: jQuery is not defined
this is my application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
$(function(){
$(document).foundation('alert');
});
In the gemfile is present the jquery-rails gem.
I really don't know where crush my head. All the help is appreciated
remove Gemfile.lock
do
$bundle install
now check if jQuery works
when using the bootstrap-sass gem i have loaded my css files properly, however have been receiving an error when i try loading the javascript files. I have followed the procedure of loading javascript from https://github.com/twbs/bootstrap-sass however when I view my webpage on localhost I receive the error "couldn't find file 'bootstrap'"
This is what my application.js file looks like - Any help would be much appreciated!
Application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
// Loads all Bootstrap javascripts
//= require bootstrap
//= require_tree .
From the Rails 4 the :assets group isn't used anymore, please remove the group from Gemfile:
Rails 4.0 removed the assets group from Gemfile. You'd need to remove that line from your Gemfile when upgrading. You should also update your application file (in config/application.rb):
Bundler.require(:default, Rails.env)
I got it to work by removing gem 'bootstrap-sass', '~> 3.0.3.0' out of the assets group in gemfile! YAY
Did you bundle install and make sure you are loading application.js (from the assets pipeline).
I'm trying to implement an infinite scroll and using jquery.pageless
But I'm getting this error: undefined method 'pageless'
I include jquery.pageless.js on my application.html.erb in assets:
<%= javascript_include_tag 'jquery-1.3.2.min', 'jquery.pageless' -%>
Any suggestion about how to solve this?
I don't know why you are using the format:
<%= javascript_include_tag 'jquery-1.3.2.min', 'jquery.pageless' -%>
in application.rb.
In assets/javascript/application.js, add those files:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jqeury.pageless
//= require jquery_ujs
//= require_tree .
You need to make sure you have jquery installed:
gem install jquery-rails
then:
bundle install
Also make sure you have the jquery-pageless.js files in on of the paths mentioned in the application.js file so it gets picked up by the asset pipeline.
Application.js file:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery.pageless
//= require jquery_ujs
//= require turbolinks
//= require_tree .
I am working on a Rails 3.2.13 app, and encountering the following problem:
The Javascript files I wrote in the app/assets/javascripts/ directory don't seem to be run.
I have JS code in a file called menu_list.js in the app/assets/javascripts/ directory, but it does not do anything. Whereas when I put the same code on the view page in a tag, it works.
<script>$("#sortable").sortable();</script>
Here's my application.js file:
//= require jquery
//= require jquery_ujs
//= require jquery.purr
//= require jquery-ui
//= require best_in_place
//= require bootstrap
//= require bootstrap-switch
//= require_tree .
my menu_list.js file:
$(function() {
$("#sortable").sortable();
});
It does not make sense to me, as I thought //= require_tree . would include all the javascript files in the directory. I tried other javascript files too, but they don't seem to have any effects.
$("#sortable").sortable();
If this truly is all you have in app/assets/javascripts/menu_list.js it will run as soon as the script is loaded, which is not what you want. You want to run the above code at least after the DOM has fully loaded into the page and not before.
$(function() {
$("#sortable").sortable();
});
If the environment you're running in is :development, and you properly have the following in your layout
<%= javascript_include_tag "application" %>
you will see a separate <script> tag for every Javascript file Sprockets is loading. The //= require_tree . will pick up your app/assets/javascripts/menu_list.js file.
I suggest also making sure you don't have any precompiled version of your assets in place by running the following in shell
rake assets:clean
You can also force debug mode (individual <script> tags for each file) by adding a :debug option to the above include tag
<%= javascript_include_tag "application", debug: true %>
Most common cause for this is that the call to javascript_include_tag that is on the default layout, then you create another layout, forget to add the include there and then nothing works in controllers where you use this new layout.