Replace rails/webpacker

[dacook]

We use the gem rails/webpacker, which has been retired. Some of its dependencies already have security warnings and can't be automatically updated (eg loader-utils), because webpacker locks to the older versions.

The webpacker readme provides a few suggestions on how to proceed.

---

Edit: consensus is to try jsbundling-rails

[mkllnk]

We moved all assets into the webpacker directory to manage it there. I reckon that we should revert that one by one and tackle the Javascript part last. We will be reverting a lot of this pull request:

• 7784

It has 51 commits and many of them deal with individual packages like Foundation and jQuery. It may be useful to have a hybrid system for a while. I picked relevant commits here in reverse order to act on:

• 1ff75ee6424683acf948a3a59fb50982547e99c0 fonts
• aa6a4925ac7b63d98b2afbc155c10d8a00a78fec images
• 63f65676373b78c25349346a9e04c8f58ad8310c images
• 2888d75cd31c12d061b092dc4724ee0bcf38bf58 images
• 12f51febd385a0d77b503c2bf26766db57744c7c images
• 31276ff3f5a6c85fc7e97ae6894dc5a9ad82e7b3 images & fonts
• a11aebb2ca53db5305bb5b00ea66a57926d17754 css
• 90956c9d1042dac27e2f818b0343926e4286e26e css
• a55c38c84271628421df9d2c4a850675f881ccd8 select2
• 0e4d77a1bc47015930882d51894368c4f0e2adf0 select2
• 80be57a77775875935aae5a0f8282147e47223ac select2
• a38d495befafa022d1d531912f5112e5b46323e7 images
• 5bc02d1e74e2b77b599c62f805cc6d7eb90a0711 font-awesome
• 6f06205eed765c505664c3edf97cac0cadf2a70b css
• ba583dcf39d50b7b2d55574a2441152828b32e2c jquery-ui
• 9d18f318ac79b2a66b33fa4ba4f0745842d337e8 css
• b33ac49442917b472949cb5e276bfcb8bd04c2fe autocomplete, leaflet
• 0057dbcb895504b8fb48651c9a62316d1d10efd1 autocomplete, leaflet
• 2e194ac3126e2d0a134e89fa9a975880932526c3 foundation js
• 825aeeae04170771acc1645af95c55f418511fe7 css, images
• cb27081425c9e8f62e71f1ab81e2e8bf255973f6 foundation
• 8dfc30438b345f4e31200d212f833ef0dee54b23 css

[abdellani]

From the article, there are three alternatives:

1. importmap-rails the default approach that will be used on Rails 7.
2. jsbundling-rails

   If you're on Webpacker today, it's a very modest jump to switch to one of the bundlers made available through the jsbundling-rails gem. You don't even have to stick with Webpack. Fundamentally, they all work in the same way: take an entry point, produce a build. We've initially taken that path with Basecamp 3, converting from Webpacker to esbuild. But with HEY, we took the full step of going straight to import maps. Neither choice involved a lot of effort. The JavaScript is still the JavaScript. You're mostly adjusting a few import paths.

3. Separate the backend (Rails API) and the frontend ( I don't think that this is an option for us since we are moving to stimulus)

From what I can see, the first approach will be the best fit when AngularJs will be removed.

In the meantime, while it's still possible to use the first on the presence on AngularJS, I'm not sure if we should use jsbundling-rails.

[mkllnk]

jsbundling-rails seems to be closer to what we do at the moment. So I would start there. We do have JS templates which contain Ruby code. And I believe, but I may be wrong, that importmaps-rails doesn't support this mix.

[abdellani]

How about using shakapaker? @openfoodfoundation/developers

[mkllnk]

How about using shakapaker?

Yes, that would be the easiest path forward for now because it offers backwards-compatibility with webpacker. Long-term, I would like to get closer to the original Rails asset pipeline with sprockets and importmap. Default packages are often better maintained and tested. And Rails usually picks very good defaults which are still quite simple and robust while offering everything you need.

Anyway, if we can't jump straight back to the defaults then we should transition to Shakapacker for now.