Webpack WebResource empty in browser

Jira Development Jira Server
, , ,
1

Hey together,

so I’m trying to develop an application that uses some advanced react components. I know, they might not fit to the UI that much but the actual reason for me is, they’re already validated and tested.

So I’ve set up some test project first where I want to get the WebResource stuff working with that.
I created a little example, mostly looking at posts like Developing a JIRA add-on like it's 2016 - Atlassian Developer Blog and similar.
The code seems to work when running it in the Webpack dev server but the converted file is empty when actually opening my page in JIRA.

My plugin.xml

  <!-- add our web resources -->
  <web-resource key="jira-advancedwf-resources" name="jira-advancedwf Web Resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <resource type="download" name="jira-advancedwf.css" location="/css/jira-advancedwf.css"/>
    <resource type="download" name="jira-advancedwf.js" location="/templates/jira-advancedwf.js"/>
      <resource type="download" name="reactTest.js" location="/client/reactTest.pack.js"/>
    <resource type="download" name="images/" location="/images"/>
    <context>jira-advancedwf</context>
  </web-resource>

Note: The first js-file is loaded, so I think I can exclude an error there (I’ve a test flag shown with that and it’s working). So basically it appears like that (tested with the network console of both Chrome and FF):

;
/* module-key = 'com.scholledev.jira.advancedwf.jira-advancedwf:jira-advancedwf-resources', location = '/templates/jira-advancedwf.js' */
function testalert(){alert("test alert")};;
;
/* module-key = 'com.scholledev.jira.advancedwf.jira-advancedwf:jira-advancedwf-resources', location = '/client/reactTest.pack.js' */
;

My Webpack Config for production:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: {
        reactTest: ['./src/reactTest.jsx']
    },
    output: {
        path: path.join(__dirname, '../src/main/resources/client'),
        filename: '[name].pack.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
        ],
    },
};

Also note: I checked that my transpiled file is not empty. So I guess somehow my maven does something here that “removes” (or ignores) the content of the file.

2

I have this working just fine in a few plugins. I’m a straight-up webpack newb so my configs probably suck but after work here I’ll pull what I can and post it for your reading pleasure.

1 Like
3

Web-resource

<web-resource key="plugin-resources" name="approval-panel Web Resources">
        <dependency>com.atlassian.auiplugin:ajs</dependency>
        <dependency>com.atlassian.auiplugin:aui-flag</dependency>
        <dependency>com.atlassian.auiplugin:aui-select</dependency>
        <resource type="download" name="plugin.css" location="/css/plugin.css"/>
        <resource type="download" name="plugin.js" location="/js/plugin.js"/>
        <resource location="/client/module.pack.js" name="module.js" type="download"/>
        <resource type="download" name="images/" location="/images"/>
        <context>atl.general</context>
</web-resource>

Webpack config

require('webpack');
const path = require('path');

module.exports = {
  entry: {
    module: ['./src/index.js'],
  },
  output: {
    path: path.join(__dirname, '../src/main/resources/client'),
    filename: '[name].pack.js',
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  plugins: [],
  externals: {
    i18nStrings: 'require("jira/nps/i18n")',
  },
};

Haha I can’t see any differences from yours or mine. Have you tried a clean rebuild? How are you triggering npm or webpack to compile your javascript?

1 Like
4

Thanks for bringing that up and actually it helped me to get further with that.

I added

  plugins: [],
  externals: {
    i18nStrings: 'require("jira/nps/i18n")',
  },

at the bottom of my config and cleaned my target before running it again.
The source does now show up.

However, I’ve a different question: How do you actually use the generated code?
For example, I’ve a webwork module that returns a view. I can’t get the code working there. In the Webpack server I’ve to put the script for rendering like that:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './reactTest.jsx';

console.log('Hey guys and ladies!');

ReactDOM.render(<Hello />, document.getElementById('rootTest'));

“Hello” is a component and the rendering works fine in my Webpack server.
However, when using this in my velocity template, I’m getting the error that the target element is not a DOM element (I assume because the code is injected in the head and the div was not created yet). But neither I can call the function because it’s not accessible in the top level of the transpiled code?

My view:

<html>
<head>
    <title>SUCCESS</title>
    <meta name="decorator" content="atl.admin">
</head>
<body>

<div id="rootTest"></div> // Creating the div
<script>testalert()</script> // Normally, this should call the function for rendering
</body>
</html>

Is there actually something completely different how it gets rendered?

5

Hi! Have you figured out by a chance how to wire React with Jira server? I am struggling with the same problem as you, I need to find a way to add js after the HTML is rendered to hang React elements on it, and the traditional way of adding web-resources does not help here much since it indeed adds js in head. I would appreciate any help on this.

6

IIRC you should just call ReactDOM.render() in AJS.toInit(function(){}), or document.ready().

7

Hi

I am interested in finding out how to hook react to jira server plugin.
I have everything in the Developing a JIRA add-on like it's 2016 - Atlassian Developer Blog working for my app
But I cannot load up the react part in my jira plugin

Any help will be greatly appreciated

8

Did you find any fix for that problem ? Im stuck at the same thing.

Edit: Found a solution. Lazy Load with the WRM works perfectly for me.