Rails 6 jQuery upgrade with webpacker!
Tags: rails, webpacker, jquery, ruby
Published: 2020-03-30 07:16:01

---
canonical_url: https://www.botreetechnologies.com/blog/rails-6-jquery-upgrade-with-webpacker
title: Rails 6 jQuery upgrade with webpacker!
published: True
description: Here’s a detailed blog on how to add jQuery in your Rails 6 application with the help of webpacker!
tags: rails, webpacker, jquery, ruby
---

![Rails Webpacker jQuery](https://www.botreetechnologies.com/blog/wp-content/uploads/2020/03/rails-6-jquery-upgrade.png)

Adding jQuery to Rails 6 with webpacker will enable you to write ES 6 flavored JavaScript applications in no time. 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 with webpacker to your[Ruby on Rails Development](https://www.botreetechnologies.com/blog/ruby-on-rails-development-obstacles-opportunities) version for building your frontend of the application.

This blog is divided into three sections:

* jQuery in an older version of Rails
* Webpacker Installation
* Add jQuery with webpacker

### 1. JQuery in an older version of Rails:

If you are using an older version on Rails and added [jQuery](https://jquery.com/) to it. Then the easiest way to add jQuery was to use [jquery-rails](https://github.com/rails/jquery-rails) gem.

By doing so the `jquery` and `jquery-ujs` 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` by default, add these lines:

```
//= require jquery
//= require jquery_ujs
```

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

```
//= require jquery
```

Adding jQuery in this way makes it part of the [rails asset pipeline](https://guides.rubyonrails.org/asset_pipeline.html).

Now if you are upgrading your rails version to Rails 6 and use it with [webpacker](https://github.com/rails/webpacker) then you need to remove `jquery-rails` from `Gemfile`.

Remove below from application.js

```
//= require jquery
//= require jquery_ujs
```
### 2. Webpacker Installation

[Webpacker](https://github.com/rails/webpacker) gem uses [Webpack](https://webpack.js.org/) to manage app-like JavaScript modules in Rails. 

Webpacker makes it easy to use the JavaScript pre-processor and bundler `webpack 4.x.x+` to manage application-like [JavaScript in Rails 6 jquery](https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker). 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).

Rails 6 comes with webpacker by default so you don’t 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.

### Read Also: [Notable ActiveRecord changes in Rails 6 – Part1](https://www.botreetechnologies.com/blog/notable-activerecord-changes-in-rails-6-part-1)


If you are upgrading rails app from an older version then you need to add below line manually in your `Gemfile`

```Gemfile
gem 'webpacker', '~> 4.x'
```

Once you have added it then you need to run the following command to install Webpacker:

```
$ bundle exec rails webpacker:install
```

Optional: To fix ["unmet peer dependency"](https://github.com/rails/webpacker/issues/1078) warnings,

```
$ yarn upgrade
```

Once installed, you can start writing modern ES6-flavored JavaScript apps right away:

Rails will provide you with the basic directory structure as follows

```
app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  └── src:
  │   └── application.css
  └── images:
      └── logo.svg
```

In `/packs/application.js`, include this at the top of the file:

```javascript
import 'core-js/stable'
import 'regenerator-runtime/runtime'
```

You can then link the JavaScript pack in Rails views using the [javascript_pack_tag](https://www.rubydoc.info/github/rails/webpacker/Webpacker%2FHelper:javascript_pack_tag) helper. 

```erb
<%= javascript_pack_tag 'application' %>
```

So by doing this, your [Rails webpacker jquery](https://www.botreetechnologies.com/ruby-on-rails-development) installation will get completed. No need to do the above steps if you already are using Rails 6.
### 3. Add jQuery with webpacker

In our Rails application run below command to add jQuery.

```
$ yarn add jquery
```

This will add jquery to Rails 6 to your application frontend. So we can access it in the webpacker. Just add following at `config/webpack/environment.js`

{% gist https://gist.github.com/AnkurVyas-BTC/b240fb521d7edfd4247e1cab729f3999 %}

Add `require("jquery")` to your `app/javascript/packs/application.js`

{% gist https://gist.github.com/AnkurVyas-BTC/549e5a31c47138f92521db18975dc87f %}

Now you will be able to add [JQuery in Rails 6 application](https://www.botreetechnologies.com/blog/rails-6-notable-changes-in-railties-module)!