How to use jquery provided by jira via webpack

Hi,

I am trying to use the default jQuery provided by Jira 9.6 API in front end. Using Atlassian document Jira Front-end 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 in chrome console
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

1 Like

To use the default jQuery provided by Jira 9.6 API via webpack, you can follow the steps mentioned below:

  1. Install the Jira Front-end API module in your project using npm:

npm install jira-frontend-api

  1. In your webpack configuration file, add the following alias to resolve the jira-frontend-api module:

npm install jira-frontend-api

  1. In your webpack configuration file, add the following alias to resolve the jira-frontend-api module:

resolve: {
  alias: {
    'jquery': 'jira-frontend-api/jquery-2.2.4'
  }
}

This tells webpack to resolve any import 'jquery' statement to jira-frontend-api/jquery-2.2.4.

  1. In your application code, you can import jQuery using:

import $ from 'jquery';

or

const $ = require('jquery');

This loads the jQuery module provided by Jira, and you should be able to use it like you would use any other jQuery module.

If you encounter any issues, make sure to check the Jira Front-end API documentation for more information on how to use the jQuery module. For details you can take help from relevant blogs.

Thanks for replying, As I have checked before, npmjs doesn’t have a package by the name jira-frontend-api. Still trying to install above resulted in error below -

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/jira-frontend-api - Not found
npm ERR! 404
npm ERR! 404  'jira-frontend-api@*' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:

Is there another package manager that I should be pointing to?

Any assistance @madamczak

@Saurabh.Vamhi I’m assuming you are using atlassian-webresource-webpack-plugin already, right?

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: {
         amd: 'jquery',
         commonjs: 'jquery',
         root: 'jQuery',
       }
     }
  }

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

Once you add that you can import the jquery module:

import $ from 'jquery'; 
// instead of "$" you can use a different name e.g. jQuery. Only the name of the imported module should match the dependency key in providedDependnecies`
import jQuery from 'jquery';

Here are the docs: atlassian-webresource-webpack-plugin - npm

Adding providedDependencies did not fix the issue. I am still getting undefined error.

//Running command
console.log($.fn.jquery);

//Error in chrome console
caught (in promise) TypeError: Cannot read properties of undefined (reading 'fn')
    at OpenDialog.init (bundle.js?locale=en-US:104:84)
    at bundle.js?locale=en-US:302:36

Did you remove the alias entry from the webpack config? The alias for jQuery shouldn’t be used if you use providedDependencies with WRM plugin.

You can check what JS code was produced under the target directory if you compile the code with mvn/atlas command.

I am not using alias for any item in plugin. Here is some code generated automatically while packaging

    <dependency>jira-frontend-api:jquery-2.2.4</dependency>
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! jquery */ "jira-frontend-api:jquery-2.2.4/undefined");
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_2__);
/***/ "jira-frontend-api:jquery-2.2.4/undefined":
/*!*********************************************************************!*\
  !*** external {"amd":"jquery","commonjs":"jquery","root":"jQuery"} ***!
  \*********************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = undefined;

/***/ })

I am not sure how i can use this to debug.

Also here is my config file -

const path = require('path');

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

const mode = process.env.NODE_ENV || 'development';

const languages = {
    "en": ['./src/i18n/macro.properties']
}
// const providedDependencies = {};
const 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: {
            amd: 'jquery',
            commonjs: 'jquery',
            root: 'jQuery',
        }
    }
};

//director to create the initial bundle
let outputDir = path.resolve(__dirname, 'dist');

//directory to create the platform bundle
let platform_outputDir =path.resolve(__dirname, 'dist_server');

//main webpack config to load all modules
const get_bundle_config = () => {
    return {
        mode: mode,
        entry: {
            standalone: './src/index.js',
        },
        devtool: '',
        devServer: {
            contentBase: outputDir,
        },
        output: {
            path: outputDir,
            publicPath: '/dist',
            filename: '[name]/bundle.js'
        },
        module: {
            rules: [...]
        },
        plugins: [...],
        optimization: {
            splitChunks: {
                chunks: 'all'
            }
        },
    }
}

module.exports = () => {
    let webpack_config;

    let config = get_bundle_config();

    //remove public path
    delete config.output.publicPath;

    //update output dir
    config.devServer.contentBase = platform_outputDir;
    config.output.path = platform_outputDir;

    delete config.entry["admin"];

    //add atlassian webpack for
    config.plugins.splice(config.plugins.length - 1, 0, new WrmPlugin({
        pluginKey: "com",
        contextMap: {
            standalone: ['atl.general', 'atl.admin'],
        },
        xmlDescriptors: path.resolve(platform_outputDir, 'META-INF', 'plugin-descriptors', 'wr-defs.xml'),
        providedDependencies: providedDependencies
    }))

    webpack_config = [config]
    return webpack_config;

}

I have deleted most of the config so it makes more sense.

Please ensure you checked the limitations:

Notes and limitations

  • Both output.library and output.libraryTarget must be set for the WRM manifest file to be created.
  • output.library must not contain [chunk] or [hash], however [name] is allowed
  • output.libraryTarget must be set to amd
  • More properties might be added to the WRM manifest file in future

if you didn’t configure that or are using different values, the produced output will be invalid.

Could you turn on the verbose: true for the WRM config and share the WRM plugin logs?

I was not able to get the front end code running in chrome console after putting in output.library and output.libraryTarget as suggested in the doc. Facing many issues with it. Not sure what I need to do to get it working.

Currently the whole system is working with external jquery.

Here is the log as requested


> tru-js@1.0.0 build:server
> platform=server webpack

Using provided dependencies [
  [
    'wrm/require',
    {
      dependency: 'com.atlassian.plugins.atlassian-plugins-webresource-rest:web-resource-manager',
      import: [Object]
    }
  ],
  [
    'wrm/context-path',
    {
      dependency: 'com.atlassian.plugins.atlassian-plugins-webresource-plugin:context-path',
      import: [Object]
    }
  ],
  [
    'wrm/data',
    {
      dependency: 'com.atlassian.plugins.atlassian-plugins-webresource-plugin:data',
      import: [Object]
    }
  ],
  [
    'wrm/format',
    {
      dependency: 'com.atlassian.plugins.atlassian-plugins-webresource-plugin:format',
      import: [Object]
    }
  ],
  [
    'jquery',
    { dependency: 'jira-frontend-api:jquery-2.2.4', import: [Object] }
  ]
]

*********************************************************************************
The output.jsonpFunction is not specified. This needs to be done to prevent clashes.
An automated jsonpFunction name for this plugin was created:

"atlassianWebpackJsonp6edce85f969ec86e3d219851227fb5de"
*********************************************************************************


plugging hole into request to wrm/context-path, will be provided as a dependency through WRM
plugging hole into request to jquery, will be provided as a dependency through WRM
Hash: bae258b7b0162bc43c33
Version: webpack 4.46.0
Child
    Hash: bae258b7b0162bc43c33
    Time: 1692ms
    Built at: 05/02/2023 2:27:06 PM
                                      Asset       Size              Chunks                   Chunk Names
                                0/bundle.js     35 KiB                   0  [emitted]
                            0/bundle.js.map   38.5 KiB                   0  [emitted] [dev]
                                1/bundle.js     13 KiB                   1  [emitted]
                            1/bundle.js.map   14.5 KiB                   1  [emitted] [dev]
                                2/bundle.js     12 KiB                   2  [emitted]
                            2/bundle.js.map   17.7 KiB                   2  [emitted] [dev]
    META-INF/plugin-descriptors/wr-defs.xml   2.59 KiB                      [emitted]
                      imagesJs/truLogo.svg   11.7 KiB                      [emitted]
                                 index.html  268 bytes                      [emitted]
                       standalone/bundle.js     16 KiB          standalone  [emitted]        standalone
                   standalone/bundle.js.map   13.1 KiB          standalone  [emitted] [dev]  standalone
               vendors~standalone/bundle.js   20.9 KiB  vendors~standalone  [emitted]        vendors~standalone
    Entrypoint standalone = vendors~standalone/bundle.js standalone/bundle.js standalone/bundle.js.map
    [./node_modules/css-loader/dist/cjs.js!./src/dialog/css/dialog.css] 22.8 KiB {0} [built]
    [./src/css/js/tru.js] 9.76 KiB {2} [built]
    [./src/css/js/loader.js] 1.51 KiB {standalone} [built]
    [./src/dialog/css/dialog.css] 339 bytes {0} [built]
    [./src/dialog/images/truLogo.svg] 65 bytes {0} [built]
    [./src/dialog/js/dialog.js] 3.14 KiB {0} [built]
    [./src/dialog/js/loader.js] 1.48 KiB {standalone} [built]
    [./src/dialog/template/dialog.soy] 2.25 KiB {0} [built]
    [./src/index.js] 370 bytes {standalone} [built]
    [com.atlassian.plugins.atlassian-plugins-webresource-plugin:context-path/WRM.contextPath] external {"var":"WRM.contextPath","amd":"wrm/context-path"} 42 bytes {standalone} [built]
    [jira-frontend-api:jquery-2.2.4/undefined] external {"amd":"jquery","commonjs":"jquery","root":"jQuery"} 42 bytes {0} [built]
        + 12 hidden modules
    Child html-webpack-plugin for "index.html":
         1 asset
        Entrypoint undefined = index.html
        [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
        [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
            + 2 hidden modules

I feel this is getting out of the context of what you can support/assist. Could you please let me know if you do have a running example of above, which will help greatly. As I feel this is very common item and is already being used by multiple plugins.

If you need only jQuery, you can use AJS.$
For example, in Jira 8.13.2

AJS.$.fn.jquery

Returns

‘2.2.4’

I am working on Jira 9.6 and the item which I am having hard time to implement is recommended way from Atlassian, for version 9.0+

Finally, I was able to get it working by using code derived from madamczak’s answer and using the example provided in link atlassian-webresource-webpack-plugin - npm

    "jquery": {
        dependency: 'jira-frontend-api:jquery-2.2.4',
        import: {
            var: "require('jquery')",
            amd: "jquery",
        }
    },

and using import statement as below

import $ from 'jquery';
1 Like