How to use jquery provided by jira 9.6 api via webpack

I am trying to use the default jQuery provided by Jira 9.6 API in front end. Using Atlassian document https://developer.atlassian.com/server/jira/platform/jira-frontend-api/.

How do you use the above provided api via webpack? Through trial and error, I was able to get the code to compile. Although it ended in failure as I got undefined $, jQuery variable.

Code I am using -

import 'wr-dependency!jira-frontend-api:jquery-2.2.4';

or

import $ from 'wr-dependency!jira-frontend-api:jquery-2.2.4';

or

import jQuery from 'wr-dependency!jira-frontend-api:jquery-2.2.4';

Also tried the requireJs lib, resulted in similar errors. Error -

//Running command 
console.log($.fn.jquery);
//Error -
bundle.js?locale=en-US:242 Uncaught TypeError: Cannot read properties of undefined (reading 'fn')
    at Function.checkAndLoad (bundle.js?locale=en-US:242:25)
    at ./src/index.js (bundle.js?locale=en-US:262:61)
    at __webpack_require__ (bundle.js?locale=en-US:20:30)
    at bundle.js?locale=en-US:88:18
    at bundle.js?locale=en-US:91:10
checkAndLoad @ bundle.js?locale=en-US:242
./src/index.js @ bundle.js?locale=en-US:262
__webpack_require__ @ bundle.js?locale=en-US:20
(anonymous) @ bundle.js?locale=en-US:88
(anonymous) @ bundle.js?locale=en-US:91

Thanks

Assuming that you are using atlassian-webresource-webpack-plugin

You can use the providedDependencies config like so:

const WrmPlugin = require('atlassian-webresource-webpack-plugin');

new WrmPlugin({
  providedDependencies: {
    "jquery": { // Name of the module we will import inside the JS files
       dependency: 'jira-frontend-api:jquery-2.2.4', // The name of the WRM module where we can find the jQuery
       import: {
         var: 'require('jquery')',
         amd: 'jquery',
       }
     }
  }

  //The rest of the WRM plugin config
  ...
})

Once you add that you can import the jquery module:

import $ from 'jquery'; 
import jQuery from 'jquery';