Last updated on April 2, 2020

Let’s keep it simple.

This article describes only on how to add jQuery using webpacker.

Assuming that you have an Rails 6 application with webpacker installed, run the following command from the root of the directory.

yarn add jquery

This will add dependencies in package.json and yarn.lock.

We need to make changes to webpack configuration, by editing the file config/webpack/environment.js.

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

It points to the jQuery in node_modules. Add those lines just before exporting that module.

Now feel free to add jQuery to javascript packs in application.js.

// app/javascript/packs/application.js

require("jquery")

That’s it. Now our application is succesfully integrated with jQuery.

Wasn’t that simple enough?

Get stories like the directly to your inbox.

Subscribe to our Newsletter

Tips and tricks, news about tech tools, recent blog entries and exclusive email only stories.


We respect your privacy and do not send spam.

Find an error in the post?

Let us know. Email us at info@internetmango.com.