Problem with Atlaskit component and WRM plugin

Jira Development Jira Server
,
1

I have a Jira server app that makes use of webpack and atlassian-webresource-webpack-plugin (version 4.1.0) to run React code. I didn’t have any problems with Atlaskit components until I tried to use @atlaskit/editor-core (version 98.13.6). I have following error in browser console:

Uncaught ReferenceError: WRM is not defined
    at Function.requireEnsure [as e] (checklists-module-bundle.js:98)
    at loader (ToolbarLoader.js:8)
    at load (index.js:28)
    at init (index.js:121)
    at Function.preload (index.js:163)
    at Plugin.init (index.js:107)
    at Function.create (index.js:897)
    at ReactEditorView._this.createEditorState (ReactEditorView.js:96)
    at new ReactEditorView (ReactEditorView.js:160)
    at constructClassInstance (react-dom.development.js:11312)

The line where error occurs looks like this:

WRM.require('wrc!com.soldevelo.apps.checklists:' + chunkId)

chunkId is “vendors~@atlaskit-internal-editor-core-floating-toolbar”

Is it a problem with atlassian-webresource-webpack-plugin, @atlaskit/editor-core or am I doing something wrong?

2

Hi @palbecki! That’s an odd error. If you’re using atlassian’s webresource webpack plugin, the WRM global should be guaranteed to exist before your webpacked code is run. It’s possible that the XML modules being generated aren’t working correctly, or perhaps there’s a bug here we’ve not yet seen.

Let’s get to the bottom of this :slight_smile:

There’s a few things we should check:

  • If the WRM global is getting defined at all on the page you’re rendering.
  • What the full URL for your feature code in the browser is.
  • Whether the XML being generated by webpack is correct**.

My working theory here is that either the WRM global isn’t getting output on the page before your code is loaded (which means a bad dependency ordering, which would mean a bug in the webpack plugin), or the WRM global isn’t on the page at all, which is a more sinister bug, likely to do with what the WRM thought it had already put on the page.

**Note: More specifically, you need to first find the web-resource that’s loading your feature’s JavaScript entrypoint, then check it has a <dependency> on com.atlassian.plugins.atlassian-plugins-webresource-rest:web-resource-manager. Here’s a pseudo-code example of what that xml fragment would look like (i’m omitting some less important details and guessing others):

<web-resource key="entry-[yourfeaturename]">
  <dependency>com.atlassian.plugins.atlassian-plugins-webresource-rest:web-resource-manager</dependency>
  <resource type="download" location="[yourbundlename].js" />
</web-resource>
3

Hi @daz, thanks for your response.

I checked that:

4

Can you elaborate on how you’re making use of iframes here? Specifically, how are you ensuring that your feature code is getting loaded inside your iframe? What call(s) are you making to the WRM to make that happen?

5

I don’t do any calls to WRM. I just add my bundle as a script to HTML page that is defined as a web resource. Then I add a link to this page as src for iframe defined in vm template.

6

@daz Do you think I can make this work with iframes?

7

I’m afraid I’m not quite sure what’s happening here. I am not aware of problems specific to iframes + WRM, nor React + WRM.

The best I can say right now is that if the WRM global variable and WRM.require function are not loaded in the iframe, the feature will not work… so we need to figure out why it is that those two things are not inside the iframe.

The webpack plugin you are using should guarantee that they are loaded before your feature code. That this is not happening is perplexing.

Are you able to put together a small plugin that demonstrates the behaviour that isn’t working? It will be much easier for me to triage and understand the problem if I can see a reproduction of the problem you’re seeing, complete with the code that causes it.

8

I just add my bundle as a script to HTML page that is defined as a web resource.

I am not sure i understand what you mean by this. Do you mean you’re doing something like this?

# webpack.config.js
module.exports = {
  entry: 'my-app.js',
  output: {
    file: '[name].js'
  }
};

# my template file
<script src="path/to/my-app.js"></script>

This would not work. The script needs to be written through the WRM. If this is what you were doing, you would need to change your template to load your bundled feature via the WRM – something like this:

# webpack.config.js
module.exports = {
  entry: {
    'my-app': 'path/to/my-app.js'
  },
  output: {
    file: '[name].js'
  },
  plugins: [
    new WrmPlugin({
      contextMap: {
        'my-app': 'my-app.feature.context'
    })
  ]
};

# my-template.vm
${webResourceManager.requireResourcesForContext('my-app.feature.context')}