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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.