Many Rails projects on Rails 6 or lower uses the Webpacker gem, a webpack wrapper, for processing and bundling JavaScript code. Rails 7 retired Webpacker and introduced a new default way of processing JS code. For existing projects making an upgrade to Rails 7, this means having to replace their JS bundling tool with another tool. In this article, we will explore some of those options.
Shakapacker
Shakapacker is the community, spiritual successor to Webpacker. It is a bundler for Webpack 5+, and it is based off Webpacker v6, even using it without alteration in some aspects. It can coexist with the asset pipeline and is a natural upgrade from Webpacker, as it was based off it. For this reason, projects that rely heavily on previous versions of Webpacker will have an easier time switching to it, as the upgrade will not require major changes. For large, complex projects coming to Rails 7, this may be a good option. To upgrade to it; follow their installation guide.
jsbundling
Jsbundling is the new default for Rails 7 and will come configured with all new apps. In contrast to Shakapacker, which must be used with Webpack, jsbundling can be used with Webpack, esbuild, or rollup.js. It uses the asset pipeline to deliver the bundled JS and also provides an option for processing and bundling simple CSS and files like fonts and images, without needing to add in another dependency. For apps with simple JS and with smaller development teams, this may be an option to consider, as the move from Webpacker is quite simple and straightforward. This can also be an option for larger projects, as long as there aren’t many Webpacker custom configuration in them. To migrate to it, just follow their step by step guide.
Bonus: cssbundling when using jsbundling
If you choose to move over to jsbundling but your project uses frameworks like Sass or Tailwind, you may need to add in cssbundling as well to process your CSS. Like jsbundling, it uses the asset pipeline to deliver bundles. The configuration may be the simplest of all these upgrades, just follow their readme.
Conclusion
As with everything regarding software development, there is no one right answer you should choose. Rather, it’s more of a question of which will suit your needs now and in the future. You may even decide that moving away from Webpacker is not worth it at all, who knows!
References
Webpack documentation Webpacker documentation Webpacker repository Shakapacker repository jsbundling-rails repository cssbundling-rails repository Rails asset pipeline documentation