Project settings's sidebar broken (Jira, P2 and React)

Hi Team,

I’ve created a p2 project setting’s page and the page is almost right. The main problem is the container’s sidebar that it’s broken.

Currently, the sidebar looks like this (I include the browser logs). The project setting’s left menu item is selected. The sidebar is the one broken.

The funny thing is that I have also seen this problem in one of Jira’s pages (HipChat integration)

this is how the sidebar (in this case open) should look

I’ve seen this problem from Jira 7.3.x to Jira 7.8. Mi page’s metadata is the following:

image

(projectKey and projectId are resolved in velocity)_

I’ve tried generating the page with a servlet and an action but no luck. I think I’m missing a web-resource dependency but I’m not sure.

Cheers
Fernando

Blame it on hipchat integration. If you think side bar is broken, that is wrong because its loading perfectly everywhere else. So whatever code is used to load the actual content of the page is hindering with sidebar.

Thank saurabh,

I don’t think the hipchat page is breaking my page. They are independent. I believe my page is missing something or doing something wrong so it’s the hipchat page (a bug for the Atlassian people?).

These are the js errors raised in both pages

Uncaught TypeError: Cannot set property ‘registerHotspotTour’ of undefined
at hotspot-tour.js:18
at hotspot-tour.js:232
Uncaught Error: undefined missing jira/projects/sidebar/expansion-manager
at l (batch.js:25)
at batch.js:25
batch.js:25 Uncaught Error: undefined missing jira/projects/sidebar/sidebar-placeholder-initializer
at l (batch.js:25)
at batch.js:25

My page is not explicitly using those missing libraries.

Any other hint?

So a quick update.

I have an extra js script that was being injected into all the configuration pages. The web-resource of the script is added with atl.admin. This script was breaking the HipChat page (and just that one for some reason). My bad, hipchat page is fine

This script and my project setting are done with ReactJs. For some reason react is messing with Jira’s require library. Both the script and page’ web resources include one react entry point created with webpack, babel, yarn, etc.

I need to investigate more and find the way to isolate the react apps from the ‘container’.

If anybody has had this problem and keen to share a solution, please do so!

Thanks guys!
Fernando

I do not have experience with Require and ReactJs, but if you are going to include all of the them then there is noConflict option in most of the libraries or you could try reusing. I am no expert just a suggestion.

I’ve had similar issues, and it was related to my webpack configuration.
If you have multiple chunks, you might need override default jsonpFunction

HI a.belostotskiy, how did you fixed the missing ‘require’ libraries. Would you be able to show your webpack config? I’m pretty stuck here.

My project page that is breaking the sidebar only loads one of my chucks. Is my chunk messing with jira’s modules.

I have also tried atlassian-webresource-webpack-plugin and start using the generated web resources definition but I ended up in the same problem.

Hey @daz, I think you are the dev of atlassian-webresource-webpack-plugin. Do you think that the webpack plugin would solve my require problem?

I have created a repo with a minimal jira p2 react configuration where the problem can be reproduced.

The code doesn’t use atlassian-webresource-webpack-plugin. I’ll create a branch with the webpack plugin integrated.

1 Like

Hi @fboucquez, I will find some time to check your example later this afternoon and update this comment with what I can figure out for you.

Update 5:03pm: this problem is occurring only when the files are batched. The problem is not due to your code, but rather to a cascading JavaScript error: as soon as a single uncaught exception occurs in the batch.js file, the rest of it is not executed, which means the jira/projects/sidebar/expansion-manager module doesn’t get defined, which means things depending upon it don’t work, which means other files stop working, and so on and so forth.

The problem is emanating from Jira’s instantiation of the moment library. The curious thing is that moment registers itself just fine on most other pages… what’s special about this one?

It turns out the problem is due to a bad interop between Webpack, Babel Runtime (core-js), Moment, Jira, and its JS libraries.

  • Your webpacked code includes the babel-runtime and babel-polyfill code – aka, core-js. The code in core-js defines var global = // effectively window.
  • Moment.js tries to be a good citizen: if it sees that global exists, it exports itself to that. Otherwise, it exports itself to this.
    • The presence of core-js makes it export to global.
    • JSLibs expects global to not exist, so that moment will be exported to this.
  • JSLibs fails to register the library correctly as an AMD module.
  • Jira doesn’t pick up the library.
  • The cascade of errors begins.

This is, in essence, a latent bug in Jira. As such, I’ve raised https://jira.atlassian.com/browse/JRASERVER-67644.

Of course, the bug is only caused if window.global is defined. How is that getting on to the page? Through your inclusion of babel-polyfill in your feature’s entrypoint.

To avoid this, I can see two options:

  • Compile to es5 syntax; avoid use of the features that require the babel-polyfill at runtime (mainly the new primitives like Map, Set, Object.prototype and Array.prototype methods).
  • Install the transform-runtime babel plugin, then configure it to include the stuff you need in a way that does not pollute the global scope:
    // .babelrc
    {
      "plugins": [
        ["transform-runtime", {
          "helpers": false,
          "polyfill": true,
          "regenerator": false,
          "moduleName": "babel-runtime"
        }]
      ]
    }
    

I’m aware of discussions within the Atlassian developer community about babel-polyfill and the runtime that products like Jira provide. As more vendors try to use language features that don’t exist in Atlassian’s supported browsers, interoperability problems like this continue to crop up. It may make sense for Atlassian products to provide a common runtime, though there are tradeoffs and risks to consider. That’s a separate discussion which I’ll start elsewhere.

Hope that helps get you unstuck in the short term.

Cheers,
Daz

Awesome daz, own you one. This example is not using atlassian-webresource-webpack-plugin I’ll try to add it later today (but I got the same problem in the real addon).

I reckon the example may help the community. I took me a while to set it up (there are a lot of blogs out there but they get pretty complex or outdated quickly ).

Update 25/7/18:

Hey @daz, pretty awesome answer. Thank you so much. You have definitely helped me out here.

I tried transform-runtime but I couldn’t make it work so I removed polyfill and upgraded (downgraded…) the code to use underscore for methods not in es5. It wasn’t that painful.

The confusing part for me was that the sidebar wasn’t breaking consistently along installations so it confused me a lot. The consist problem that caused the chain of errors was the moment loading error. I have commented the issue you have created in Jira. Hope Jira/Confluence/etc provide polyfill out of the box in the future.

Question: what would it be the real benefit of using atlassian-webresource-webpack-plugin? Apart from having the generated wr-defs.xml?

Glad I could be of help, @fboucquez!

The webresource webpack plugin’s main aim is to let you take advantage of Webpack’s features, like code splitting and tree-shaking, while avoiding having to manually craft XML and JS to load the resulting files. The plugin doesn’t do anything you couldn’t do yourself by hand… but manually optimise what a machine can do for you automatically?

If you do not find managing your web-resource definitions painful, your application size is small, and your time to first paint is fast, you probably do not need the webresource webpack plugin.

If your app’s bundle size starts getting quite large, the time to render of your page starts getting longer, or you start getting annoyed at writing the boilerplate code to glue your files in to a running application correctly, you may want to revisit the plugin.