在 Webpacker 5 中加载 jQuery 的问题

Question

I'm trying to add jQuery as a Webpacker/Webpack (5.4.3) plugin to my Rails (6.0.4.1) app, but I keep getting a "jQuery is not defined error." I'm using the following code, which seems to be the general answer to this question on most searches:

// config/webpack/environment.js

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

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

module.exports = environment

Now, I CAN get it working using the following code:

// application.js

import $ from 'jquery/dist/jquery.js';

globalThis.jQuery = $;
globalThis.$ = $;

I'm fairly new to Webpack/Webpacker, so I'm mostly just trying to understand why the top solution won't work. Thanks!

Answer 1

The provider module automatically loads the module, but , it is made available only within the files that are actually ES Modules . ES Module is a JS file containing at least one import or export statement or a file ending with .mjs extension.

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

The above code will make identifiers $ and jQuery available within any ES Module whenever Webpack encounters these free identifiers in your code. In other words, the ProvidePlugin doesn't really modify the global scope .

Inside your application.js file, you will need to do what you have done:

globalThis.jQuery = $;

// or
window.jQuery = $;

And your application.js file should have at least one import or export statement not necessarily the jQuery import statement. Alternately, if you do not like it then, you can also consider using expose-loader .