Read more

Webpacker: Side effects of using window.* within the ProvidePlugin

Emanuel
May 08, 2019Software engineer at makandra GmbH

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
Illustration book lover

Growing Rails Applications in Practice

Check out our e-book. Learn to structure large Ruby on Rails codebases with the tools you already know and love.

  • Introduce design conventions for controllers and user-facing models
  • Create a system for growth
  • Build applications to last
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
Posted by Emanuel to makandra dev (2019-05-08 09:59)