Shakapacker, Rails, React: Doesn't load up app/assets non-react javascript

Question

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!!

Answer 1

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