How to add jquery third party plugin in rails 6 webpacker

Question

I know its simple but with update of rails 6. there is new syntax in rails 6 for manage javascript assets which is maintained by webpacker.

//application.js
         


        

Answer 1

to resolve jquery third party plugin issue add jquery via yarn

yarn add jquery

for adding jquery support in rails 6 application first we need to add below configuration

# app/config/webpack/environment.js
const {environment} = require('@rails/webpacker');

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery' # or if its not work specify path `'jquery/src/jquery'` which node_modules path for jquery
}));

module.exports = environment;

for import any jquery related plugin in app/javascripts/packs/application.js

use below instructions

import 'bootstrap/dist/js/bootstrap';
import 'bootstrap-daterangepicker/daterangepicker'

updated with expose-loader for jQuery

yarn add expose-loader

Then add this to config/webpack/environment.js

   environment.loaders.append('jquery', {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: '$',
      }, {
        loader: 'expose-loader',
        options: 'jQuery',
      }],
    });
    module.exports = environment;

Answer 2

run below command to add jQuery.

$ yarn add jquery

Add below code in config/webpack/environment.js

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

Require jquery in application.js file.

require('jquery')

No more need to add jquery-rails gem!

Answer 3

Apparently expose-loader 1.0.0 has a different format:

environment.loaders.append('jquery', {
  test: require.resolve('jquery'),
  rules: [
    {
      loader: 'expose-loader',
      options: {
        exposes: ['$', 'jQuery'],
      },
    },
  ],
});

Answer 4

Ensure you have yarn installed and updated to the latest version, then create your rails application.

First Run the following command to install Bootstrap, Jquery and Popper.js

yarn add bootstrap@4.5 jquery popper.js

On the above ofcourse you can change to the latest version of Bootstrap.

If you open package.json file, you will notice Bootstrap 4.5, Jquery latest version and Popper.js latest versions have been added for you.

Next go to config/webpack/environment.js and amend the file.

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

environment.plugins.append("Provide", new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery',

Popper: ['popper.js', 'default']

}))

module.exports = environment

Next go to app/assets/stylesheets/application.css and amend the file make sure to require bootstrap.

*= require bootstrap

*= require_tree .

*= require_self

Finally go to application.js file and amend the file by adding import 'bootstrap'; in order for bootstrap javascript to work.

import 'bootstrap';
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()

Save all changes, restart rails server.

That should work.