How do you get JQuery to work with Rails 6 and Webpacker 6

Question

I really cant believe that getting JQuery to work with Rails 6 and Webpacker 6 can be so hard.

Suggestions in Rails 6: How to add jquery-ui through webpacker? don't appear to have worked but hard to know if it is the same code stack.

I am using Rails 6.1 and a pre-release version of Webpacker 6.0 to get Heroku to play nicely. Oh, and most of my "Javascript" is in.coffee files.

I even tried renaming application.js to application.coffee and reformatting but that didnt work either.

My Gemfile has

gem 'webpacker', '~> 6.0.0.beta.6'

I have done the following"

yarn add jquery jquery-ui-dist jquery-blockui

Then in webpacker 6 style configured as follows:

# config/webpacker/base.js
const { webpackConfig, merge } = require('@rails/webpacker')

const customConfig = require('./custom')

module.exports = merge(webpackConfig, customConfig)

# config/webpacker/custom.js
module.exports = {
    resolve: {
        alias: {
            jquery: 'jquery/src/jquery',
            jquery_ui: 'jquery-ui-dist/jquery-ui.js'
        }
    }
}

and

# code/app/packs/entrypoints/application.js

global.$ = require("jquery")
require("jquery") // Don't really need to require this...
require("jquery-ui")
require("jquery-ui-dist/jquery-ui")

This is all a mish-mash of attempts from a number of sources including this post - Rails 6: How to add jquery-ui through webpacker? , https://github.com/rails/webpacker and others.

By the way, I am trying to migrate my Coffescript from Rails 5 and so this makes extensive use of the JQuery $ global.

Any help much appreciated.

Answer 1

So the final solution with assistance from mechnicov for me was, as suggested by him:

// 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 = {
    resolve: {
        alias: {
            $: 'jquery/src/jquery',
            jQuery: 'jquery/src/jquery',
            jquery: 'jquery',
            'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ],
    // Eliminate CORS issue
    devServer: {
        host: 'localhost',
        port: 3000
    }
}

# app/packs/entrypoints/application.js

// Make jQuery available everywhere
global.$ = require('jquery'), require('jquery-ui'), require('jquery-blockui')
...

I dont know if this is the most elegant solution (are the resolve, plugins and application.js line all necessary?), but it works.

BTW also required ensuring that both the webpacker gem and the corresponding yarn module were version 6.0.0.beta.6 (see https://github.com/rails/webpacker )

# Gemfile

gem 'webpacker', '6.0.0.beta.6'

$ yarn add @rails/webpacker@6.0.0-beta.6

Answer 2

Follow the "updated" answer in the given article.

https://gorails.com/forum/install-bootstrap-with-webpack-with-rails-6-beta

Answer 3

Firstly add JQuery to project:

yarn add jquery

Then add to webpack plugins in config/webpack/environment.js :

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

environment.
  plugins.
  append(
    'Provide',
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  )

That's it

Well in webpacker 6.0 you can do use one of ways:

1. Directly update 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/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'
    })
  ]
}