Posted about 1 month ago. Visible to the public.

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

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

Copy
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

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:

Copy
import jQuery from 'jquery' window.$ = jQuery window.jQuery = jQuery

In the browser jQuery will be undefined, whereas $ is still defined. The issue 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).

Copy
import jQuery from 'jquery' global.$ = jQuery global.jQuery = jQuery

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Emanuel De
Last edit:
24 days ago
by Besprechungs-PC
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Emanuel De to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more