If you’re feeling lost whenever you have to add some javascript library to your Rails application, this post is for you! I see a lot of people battling against Webpacker whenever they need to add a new javascript library or have to fix a bug on the asset pipeline. I suffered from the same problems, too. I talked about why this happens on a previous post: “Adding Bootstrap or Javascript Sprinkles to Rails breaks everything....
Did you spend a billion hours trying to add jQuery, or Bootstrap, or Tailwind to your Rails project, but now everything on the frontend is broken? Or worse: you can’t even tell whether the frontend is broken or not. It’s in a unkown state of brokenness. Maybe you just want some javascript sprinkles, but Webpacker makes things so much harder and frustrating. Do you wait until an angry customer complains about the checkout button not working anymore to know which page to fix?...
Rails 6 comes with Sprockets and Webpacker by default. Confusing, right? The default configuration is Webpacker for Javascript while Sprockets takes care of all the rest (CSS, images, fonts…). Let me tell you a secret: You don’t need both. Just use Webpacker. Legacy applications and older gems still use Sprockets to serve assets. This was done to add backwards compatibility. If you don’t have a good reason to keep Sprockets around, don’t....