Some older Node modules rely on window.jQuery to be present. One suggested solution Show archive.org snapshot is to use this config in the app/config/webpack/environment.js:

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

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

module.exports = environment

Opscomplete powered by

Save money by migrating from AWS to our fully managed hosting in Germany.

• Trusted by over 100 customers
• Ready to use with Ruby, Node.js, PHP
• Proactive management by operations experts

Read more Show archive.org snapshot

This will work. But a side effect is that the following approach in the app/javascript/packs/application.js to expose jQuery to the browser window object will not work anymore:

import jQuery from 'jquery'

window.$ = jQuery
window.jQuery = jQuery

In the browser jQuery will be undefined, whereas $ is still defined. The issue Show archive.org snapshot is known (here $ is undefined as "window.jQuery": "jquery" is used).

You can use global instead of window, which will solve the issue (Webpack will transform global to window in the context of a web application).

import jQuery from 'jquery'

global.$ = jQuery
global.jQuery = jQuery