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

Siva G

3 min read

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.

I started reading a lot of blogs and documentations to find out the solution. But I can’t find one for the two long days. Then I came up with a workaround to overcome this issue.

1. In application.html.erb, I decided to check whether the application is running in production mode or development mode. If it is in production mode I, have to include the  <%= stylesheet_pack_tag 'application' %>

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

I felt this will solve my issue temporarily but not permanently. This started making me feel more guilty and I was again into searching for the right solution. This time, I have asked a question in StackOverflow. Sadly, I didn’t receive any proper solution as Rails 6 is new. so I didn’t get the Many of the answers suggested me to change the application.scss path but it doesn’t work in my case and I have also reinstalled Webpacker, via Rails and Yarn in different ways. Still no clue.

At last, I found the right solution after a day. I just renamed my stylesheets/application.scss into stylesheets/style.scss. And in application.js I have imported like:

import '../stylesheets/style' 

That’s it. The application worked like a charm after the deep struggle.

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:

Related posts:

6 Replies to “How WebPacker and Rails 6 Tortured Me and how…”

  1. Nice article. But I have run into the same problem and hacked it by commenting out the lines
    (or )
    So there is a deeper issue at play here ?

  2. Hey Arminius thank you for spending some time to read my blog. By commenting out the lines it will work now. But in future case you may face an issue. Its better to avoid commenting the lines. Instead of that import stylesheets in application.js. Happy coding mate.

  3. Hi,

    Thanks for this article!
    I read it several times, but still can’t solve this problem.
    I’m newbie in programming, maybe that’s why 🙂

    Anyway… that’s what I finally did (after reading your article):

    What I had before changes:
    0) application.html.erb

    1) application.css (inside the file: *= require ‘./main’) (that’s because someone told me, that it’s a bad idea to change application.css to application.scss)
    2) main.scss
    3) javascript/pack/application.js
    In this project only what I have in javascript/application.js is @import ‘bootstrap’, but I think that doesn’t matter.’

    After reading your article:

    1) stylesheets/style.scss
    2) javascript/application.js (inside: import ‘../stylesheets/style’)

    And after RAILS_ENV=production bundle exec rake assets:precompile

    i got -> field ‘browser’ doesn’t contain a valid alias configuration error
    /app/javascript/stylesheets/style.scss doesn’t exist

    So… I don’t know why it is looking at javascript/stylesheets insted of assets/stylesheets/.

    Did I something wrong or I just misunderstood the article?

    Thank your for this article. I really appreciate that!
    Regards from Poland

  4. I created the rail application today i got the same error.
    Ruby – 3.0.0
    Rails – 6.0.1

    Many times i thought est see whats there under rails 6 but it was always blocking me.
    Today i just went with

    $ rails new pokeman
    same error i encountered
    cd public and then $ rake assets:precompile solved my issue.

    Now good to explore rails 6.

  5. Seemed promising, but didn’t work for me, unfortunately.. My app works after `rake webpacker:compile` and `rails s` in production mode locally, but it doesn’t work when I deploy on heroku, and getting this error with empty manifest.json object, in the error message.

  6. I continue to be tortured by this. I’ve tried EVERYTHING, at least 3x. This has got to be a bug with Yarn, Webpacker to Node.js or all of them. Incredibly frustrated.

Leave a Reply

Your email address will not be published. Required fields are marked *