How to correctly expose jQuery with Webpack 5?

Question

Is there any specific way to expose jQuery with Webpack 5?

It used to work on Webpack 4 OK, with the config bellow, but it shows the Uncaught Reference Error: jQuery is not defined error now with 5.

module: {
    rules: [
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader',
        options: {
          exposes: ['$', 'jQuery'],
        },
      },

Nope I import it in bundle.js, as so: import $ from 'jquery'; Then I add bundle tot he html. — idm, Nov 15 '20 at 16:02
Then why not just use that imported `$`? I'm not sure about your use case here. Would be great if you can clarify it. — Sam Chen, Nov 16 '20 at 00:09
Had the same issue after upgrading to 5. Only the inline syntax worked `import videojs from 'expose-loader?exposes=videojs!video.js';` — tsi, Dec 07 '22 at 15:16

score 1 · Answer 1 · answered Dec 31 '22 at 03:53

Confirming @Sam Chen 's comment above, Webpack 5 (as of 5.75) does not require expose-loader to make $ available as an import. It was simplest to uninstall the loader, remove it from webpack.config.js, and add

import $ from 'jquery';

to all files that used it. This can get messy in the case of TypeScript projects with @types/jquery, as pages where the import is missing may not warn about it.

How to correctly expose jQuery with Webpack 5?

1 Answers1

Linked