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
require("@rails/ujs") //.start()
require("turbolinks").start()
require("@rails/activestorage").start()
require('jquery').start()
require('jquery_ujs').start()
require('bootstrap-daterangepicker').start()
require("custom/custom").start()
require("bootstrap").start()
require("channels")

i am able to add custom/custom but bootstrap and jquery is not working i have install jquery and bootstrap via npm

Smokeproof

Answer 1

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!

Pelargonium

Why you need $ and jQuery? – Cupola

@Cupola we have to define these variables globally so webpack willbe able to compile the packs. – Copartner

/config/webpack/environment.js – Iberia

After moving jQuery from the pipeline to Webpack I get a console error "ReferenceError: Can't find variable: jQuery". – Braunschweig

Now I'm getting the duplicate request. Any help? – Pugliese

Answer 2

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;

Smokeproof

What if we add another library other than jquery? like this lib: github.com/apvarun/toastify-js – Cupola

what issue are you facing? – Smokeproof

I don't know how to write that lib into environment.js and when I import in application.js I got "Root element not define" and "Toastify not defined" – Cupola

did you import toastify in application.js pack and if yes how did you import it – Smokeproof

I did yarn and go to nodes_module folder and make sure that library folder name is toastify-js – Cupola

Why you need $ and jQuery? – Cupola

This doesn't work unless I do jQuery: 'jquery/src/jquery', why is that? – Expanse

@ArianFaurtosh I think we need to specify a source file path in this section. – Smokeproof

I found that for adding jquery 3rd party plugins (my example is 'jquery-mask-plugin'), add jquery as above, add expose-loader as above, but then instead of import 'jquery-mask-plugin' which didn't work, adding require("jquery-mask-plugin") to application.js worked. – Lorin

got TypeError: Cannot read property 'ProvidePlugin' of undefined for the first solution – Microscopium

second solution with the expose-loader worked for me in Rails 6.0.2.2 and yarn 1.16.0. – Microscopium

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'],
      },
    },
  ],
});

Copyread

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 [email protected] 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.

Balthasar

Answer 5

In webpacker v. 6 there is no config/webpack/environment.js and other files structure

Firstly you need add JQuery to your project using yarn:

yarn add jquery

After that you can integrate JQuery using one of ways:

1. Directly update base config:

// config/webpack/base.js

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

webpackConfig.
  plugins.
  push(
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  )

module.exports = webpackConfig

2. Use custom config and merge it to base config:

// config/webpack/base.js

const { webpackConfig, merge } = require('@rails/webpacker')
const customConfig = require('./custom')

module.exports = merge(webpackConfig, customConfig)

// config/webpack/custom.js

const webpack = require('webpack')

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

On my opinion second way is more flexible

Jesuitism