How WebPacker and Rails 6 Tortured Me and how I Survived!

One fine day when I was having a chit chat with my colleagues in the cafeteria, I received the email notification which I was waiting for. Yes, my next project’s scope document. The use case is as exciting as it got. After the discussions with my fellow teammates, when I was about to start the application using Rails 5, I received a message from my Boss who wanted me to try the project with Rails 6. 

I have always been a hesitating man to try out new things as when things go haywire, I need people to support the issues. Still, I wanted to break it by using Rails 6 as the first person to try it out in my whole office.  At that time I was not aware of the crisis that I was going to face. 

People generally say we have to start right so that the path which follows will be right. But, in my scenario, the problem started in the first step itself. When I installed the Rails 6 in my machine, the first issue that I have faced was that I couldn’t be able to find the javascript folder which will be present in the “app/assets” by default. After a long search, I came to know that we have to use “app/javascript/packs” to place all the javascript code in a Rails 6 application. Interesting? Or bored? Anyway, I’m gonna share a few more such incidents. 

Before that let me brief you what is a webpacker!

Webpacker is static module bundler for modern JS applications. In Rails 6, Webpacker is the default javascript compiler. People who are familiar with webpacker surely know about webpacker entry points. Oh, wait! what does that mean? Entrypoint is the file where webpack looks to start building the bundle.

How Webpacker attracted me!

Being a guy who worked with the static and slow web applications, Rails 6 with Webpacker was an eye-opener for me.  If I do any changes in JS (or) CSS file, for the first time it takes some time to compile and serve. After that, I was able to feel the difference which is my application was loading very fast and blaze when compared to the previous Rails versions. Yes, this is how Webpacker made me believed that it is improving quality.

How Webpacker started showing its face to me!

In previous rails versions, we used to import application.js and application.css like below.

# app/views/layouts/application.html.erb

<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application' %>

But in Rails 6, we have to include webpacker packs in our layout files like the one below. This is equivalent to javascript_link_tag

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

This is how it starts. Normally, in application.js, we have to import application.scss.  When I import application.scss in packs, it failed to compile the SCSS and CSS file. After a long search, I found out what could work:

i.e: Remove the <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> from application.html.erb. When I removed the line, the application starts working fine and it started compiling CSS and SCSS files.

Every developer has this habit: If the application works fine even with spaghetti and unreadable code, they won’t touch it again. That’s what I did 😀

Then came the day when I was supposed to go push the application to the staging server. When I moved the application from development to staging, the demon again started laughing at me. Yes, I ran into an issue again. This time the application was in the staging server. It was kept on throwing an issue that webpacker cant find application.scss. It asked me to include the <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> in application.html.erb. If I include the above line, then the development server won’t work. So, I predicted that this is not the right solution for the issue.

<% if Rails.env.staging? %>
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<% end %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

import '../stylesheets/style' 

Putting it all together, the actual solution is that if we have the same file name in the packs folder irrespective of the file types, it will compile the first file in the tree and another file will get ignored automatically by webpacker. But I’m still wondering why webpacker is not looking at the file extension types. Anyhow, I’m happy that I got my solution right.

Though webpacker annoyed me to the core, I loved the challenge it has placed in front of me. And here I’m going to start my new project on Rails 6. Don’t worry. If I find the issues, I will share the solution for it like how I did with this blog. Happy coding !!! 🙂

Also, leaving below the StackOverflow questions for reference: https://stackoverflow.com/questions/58506351/webpacker-throws-application-css-not-found-in-manifest-json-in-rails-6-applica