{"id":9426,"date":"2020-03-30T14:26:34","date_gmt":"2020-03-30T08:56:34","guid":{"rendered":"https:\/\/www.botreetechnologies.com\/blog\/?p=9426"},"modified":"2026-03-27T17:12:22","modified_gmt":"2026-03-27T11:42:22","slug":"rails-6-jquery-upgrade-with-webpacker","status":"publish","type":"post","link":"https:\/\/www.botreetechnologies.com\/blog\/rails-6-jquery-upgrade-with-webpacker\/","title":{"rendered":"Rails 6 jQuery upgrade with webpacker"},"content":{"rendered":"\n

Adding jQuery to Rails 6 with webpacker will enable you to write ES 6 flavored JavaScrip applications in no time.<\/p>\n\n\n\n

An essential thing to note is that Rails 6 comes installed with webpacker by default so you don’t need to install it separately. In this article, I have outlined the process of adding jQuery-Rails with webpacker to your Rails version<\/a> for building your frontend of the application.<\/p>\n\n\n\n

This blog is divided into three sections:<\/p>\n\n\n\n

  1. jQuery in an older version of Rails<\/li>
  2. Webpacker Installation<\/li>
  3. Add jQuery with webpacker<\/li><\/ol>\n\n\n\n

    1. jQuery in an older version of Rails<\/h2>\n\n\n\n

    If you are using an older version on Rails and added jQuery<\/a> to it. Then the easiest way to add Ruby on Rails jQuery was to use jquery-rails<\/a> gem.<\/p>\n\n\n\n

    By doing so the jquery<\/code> and jquery-ujs<\/code> files will be added to the asset pipeline and available for you to use. If they’re not already in app\/assets\/javascripts\/application.js<\/code> by default, add these lines to add jquery Ruby on Rails:<\/p>\n\n\n\n

    \/\/= require jquery<\/code>
    \/\/= require jquery_ujs<\/code><\/p>\n\n\n\n

    If you are running Rails 5.1 and up, and if you have included \/\/= require rails-ujs<\/code>, then jquery_ujs<\/code> is not needed anymore. You can just add:<\/p>\n\n\n\n

    \/\/= require jquery<\/code><\/p>\n\n\n\n

    Adding jQuery in this way makes it part of the rails asset pipeline<\/a>.<\/p>\n\n\n\n

    Now if you are upgrading your rails version to Rails 6 and use it with webpacker<\/a> then you need to remove jquery-rails<\/code> from Gemfile<\/code>.<\/p>\n\n\n\n

    Remove below from application.js<\/p>\n\n\n\n

    \/\/= require jquery<\/code>
    \/\/= require jquery_ujs<\/code><\/p>\n\n\n\n

    2. Webpacker Installation<\/h2>\n\n\n\n

    Webpacker<\/a> gem uses Webpack<\/a> to manage app-like JavaScript modules in Rails jquery install and configuration.<\/p>\n\n\n\n

    Webpacker makes it easy to use the JavaScript pre-processor and bundler webpack 4.x.x+<\/code> to manage application-like JavaScript in Rails 6 jquery<\/a>. It coexists with the asset pipeline, as the primary purpose for webpack is app-like JavaScript, not images, CSS, or even JavaScript Sprinkles (that all continue to live in app\/assets).<\/p>\n\n\n\n

    Rails 6 comes with webpacker by default so you don\u2019t need to do anything for it! When you create a brand new jquery Rails 6 app it will add webpacker and will do the configurations for you. Rails webpack doesn\u2019t have difficult configurations during installation.<\/p>\n\n\n\n

    Read Also: Notable ActiveRecord changes in Rails 6 \u2013 Part1<\/a><\/strong><\/p><\/blockquote>\n\n\n\n

    If you are upgrading rails app from an older version then you need to add below line manually in your Gemfile<\/p>\n\n\n\n

    gem 'webpacker', '~> 4.x'<\/code><\/p>\n\n\n\n

    Once you have added it then you need to run the following command to install Webpacker:<\/p>\n\n\n\n

    $ bundle exec rails webpacker:install<\/code><\/p>\n\n\n\n

    Optional: To fix “unmet peer dependency” warnings,<\/p>\n\n\n\n

    $ yarn upgrade<\/code><\/p>\n\n\n\n

    Once installed, you can start writing modern ES6-flavored JavaScript apps right away:<\/p>\n\n\n\n

    Rails will provide you with the basic directory structure as follows<\/p>\n\n\n\n

    \"Rails<\/figure><\/div>\n\n\n\n

    In \/packs\/application.js<\/code>, include this at the top of the file:<\/p>\n\n\n\n

    import 'core-js\/stable'<\/code>
    import 'regenerator-runtime\/runtime'<\/code><\/p>\n\n\n\n

    You can then link the JavaScript pack in Rails views using the javascript_pack_tag<\/a> helper.<\/p>\n\n\n\n

    <%= javascript_pack_tag 'application' %><\/code><\/p>\n\n\n\n

    So by doing this, your Rails webpacker jquery<\/a> installation will get completed. No need to do the above steps if you already are using Rails 6.<\/p>\n\n\n\n

    3. Add jQuery with webpacker<\/h2>\n\n\n\n

    In our Rails application run below command to add jQuery.<\/p>\n\n\n\n

    $ yarn add jquery<\/code><\/p>\n\n\n\n

    This will add jquery to Rails 6 to your application frontend. This is similar to being a jquery webpacker plugin. So we can access it in the webpacker. Just add following at config\/webpack\/environment.js<\/code><\/p>\n\n\n\n