Webpack WebResource empty in browser

#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 https://developer.atlassian.com/blog/2016/06/jira-add-on-dev-2016-part-1/ 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.

React with JIRA Server?
#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 https://developer.atlassian.com/blog/2016/06/jira-add-on-dev-2016-part-1/ 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.