This week brought a major upgrade to the frontend infrastructure for DEV. We've been on webpacker 3.x and Babel 6.x for quite a while now. There were several attempts, including a couple of my own prior to working at DEV that were unsuccessful. However, this week during the last week of our cool-down period before we start our next cycle of development, I had time to perform the upgrade successfully. We are now using webpacker 4.22 and Babel 7.x.
If you're not familiar with webpacker, I encourage you to check out the project. The TLDR though is that it's a Ruby gem that makes integrating webpack bundles into a Rails app very easy.
Use Webpack to manage app-like JavaScript modules in Rails
Webpacker has been retired 🌅
Webpacker has served the Rails community for over five years as a bridge to compiled and bundled JavaScript. This bridge is no longer needed for most people in most situations following the release of Rails 7. We now have three great default answers to JavaScript in 2021+, and thus we will no longer be evolving Webpacker in an official Rails capacity.
For applications currently using Webpacker, the first recommendation is to switch to jsbundling-rails with Webpack (or another bundler). You can follow the switching guide, if you choose this option.
Secondly, you may want to try making the jump all the way to import maps. That's the default setup for new Rails 7 applications, but depending on your JavaScript use, it may be a substantial jump.
Finally, you can continue to use Webpacker as-is. We will continue to address security issues…
The upgrade opens up a lot of things that were being held back by the webpacker 4 upgrade. With the upgrade, we can now do the following:
- Upgrade to the latest Storybook. We're currently on a very old version that is missing a lot of the new awesome features.
- It moves us one more step closer to upgrading to Rails 6
Another benefit of the upgrade is faster builds in the frontend.
I won't bore you with the details of the upgrade process as they are documented already in the webpacker repository.
The issues that I ran in to during my initial attempts were false negatives. DEV, for those who aren't aware, uses Preact in the frontend, not React. Why do I bring this up? One, for awareness, but also because the issues I ran into were related to running an older version of Preact (we have a blocker for upgrading to Preact X) that was not compatible with the React DevTools.
Because the tooling was not compatible, it was creating weird UI issues when the React Devtools were running. In some cases I saw components twice, in other cases I received errors about root something something. In the end, with a clear head this week, I realized that was the issue and was able to get it all sorted.
For those interested, here is the merged PR.
That's all for now peeps!
Photo by Sebastian Herrmann on Unsplash
Nick Taylor
