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

Kamil Zieliński · Accepted Answer · 2020-02-14 20:33:42Z

27

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!

edited Feb 14, 2020 at 20:33

Kamil Zieliński

3767 silver badges13 bronze badges

answered May 15, 2019 at 13:51

Akash Rajput

3943 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

truongnm Over a year ago

Why you need $ and jQuery?

Alexander Gorg Over a year ago

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

Nate Flink Over a year ago

/config/webpack/environment.js

hellion Over a year ago

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

faisal bhatti Over a year ago

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

uzaif · Accepted Answer · 2019-10-11 06:20:18Z

17

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;

edited Oct 11, 2019 at 6:20

answered Feb 27, 2019 at 13:49

uzaif

3,5512 gold badges24 silver badges36 bronze badges

11 Comments

truongnm Over a year ago

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

uzaif Over a year ago

what issue are you facing?

truongnm Over a year ago

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"

uzaif Over a year ago

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

Sathish Over a year ago

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

|

Denise Mauldin · Accepted Answer · 2020-06-26 07:34:17Z

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

answered Jun 26, 2020 at 7:34

Denise Mauldin

5,6555 gold badges36 silver badges53 bronze badges

Comments

Elias Glyptis · Accepted Answer · 2020-07-11 06:46:57Z

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.

mechnicov · Accepted Answer · 2021-04-02 17:40:20Z

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:

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

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

Collectives™ on Stack Overflow

How to add jquery third party plugin in rails 6 webpacker

5 Answers 5

5 Comments

updated with `expose-loader` for jQuery

11 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

updated with expose-loader for jQuery

11 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

updated with `expose-loader` for jQuery