18

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

uzaif
  • 3,319
  • 2
  • 17
  • 30

5 Answers5

23

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!

Kamil Zieliński
  • 188
  • 4
  • 12
Akash Rajput
  • 339
  • 2
  • 3
16

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;
uzaif
  • 3,319
  • 2
  • 17
  • 30
  • What if we add another library other than jquery? like this lib: https://github.com/apvarun/toastify-js – truongnm Jun 06 '19 at 23:36
  • what issue are you facing? – uzaif Jun 08 '19 at 07:31
  • 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" – truongnm Jun 09 '19 at 04:16
  • did you import toastify in application.js pack and if yes how did you import it – uzaif Jun 09 '19 at 05:49
  • I did `yarn` and go to nodes_module folder and make sure that library folder name is `toastify-js` – truongnm Jun 10 '19 at 02:37
  • Why you need `$` and `jQuery`? – truongnm Jul 09 '19 at 23:36
  • This doesn't work unless I do `jQuery: 'jquery/src/jquery',` why is that? – Arian Faurtosh Aug 23 '19 at 21:38
  • @ArianFaurtosh I think we need to specify a source file path in this section. – uzaif Aug 24 '19 at 06:32
  • 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. – Jack Mar 16 '20 at 02:07
  • got `TypeError: Cannot read property 'ProvidePlugin' of undefined ` for the first solution – Sathish Mar 25 '20 at 09:21
  • 4
    second solution with the `expose-loader` worked for me in `Rails 6.0.2.2` and yarn `1.16.0`. – Sathish Mar 25 '20 at 09:21
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'],
      },
    },
  ],
});
Denise Mauldin
  • 4,205
  • 2
  • 24
  • 42
1

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.

Elias Glyptis
  • 215
  • 2
  • 8
1

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
  1. 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

mechnicov
  • 3,922
  • 2
  • 14
  • 32