create issue modal plugin "wikiRendererWebPanel" react code UI render issue

[Nikhil]

We're experiencing an inconsistency with our React plugin's behavior in the issue creation process. The plugin is designed to offer an epic template option, but its availability varies depending on how users access the "Create Issue" screen:
1. When users access the "Create Issue" modal from screens where other plugins are present in the web panel (such as for epic or story type issues), the React UI loads correctly, and the epic template option is visible and functional (see attached screenshot **Image 1**).

2. However, when users open the "Create Issue" modal from other locations (like the dashboard), the React UI fails to load for the plugin located at the "wikiRendererWebPanel" module. As a result, the epic template option is not visible or accessible (see attached screenshot **Image 2**).



This discrepancy in functionality is causing confusion for our users. We're unsure if this behavior is intentional or if it requires adjustment. Has anyone encountered a similar issue or can suggest a solution to ensure the React UI loads consistently across all access points? We'd like to provide a uniform experience for our users, regardless of where they initiate the issue creation process. Any insights or recommendations would be greatly appreciated. Thank you in advance for your help! --- Feel free to adjust any part of it as needed before posting!

[LynnG]

If the React UI only fails when the Create Issue dialog is opened from certain entry points (for example, Dashboard vs. backlog/board pages), several technical causes are worth investigating:

1. Different Create Issue Implementations

Jira does not always invoke the same Create Issue experience from every location.

• Some entry points may load the full issue creation dialog.
• Others may use a lightweight or lazy-loaded version.
• Certain web panels or extension points may not be initialized in all contexts.

Check:

• Whether your wikiRendererWebPanel module is rendered in both scenarios.
• Browser DevTools → Elements tab to confirm whether the panel's HTML is present.

---

2. React Initialization Timing Issues

Your React app may rely on page events that fire in one context but not another.

Common examples:

JavaScript

1

AJS.$(document).ready(...)

Show more lines

or

JavaScript

1

JIRA.bind(...)

Show more lines

If the modal is loaded dynamically, these events may have already fired before your component is inserted.

Check:

• Whether your React mount code executes when opening the dialog from the dashboard.
• Console logs to confirm the entry point is reached.

---

3. Missing JavaScript Resources

The required JS bundle may not be loaded in all contexts.

For example:

XML

1

<web-resource>

Show more lines

could be scoped too narrowly.

Symptoms:

• Placeholder panel appears.
• React application never mounts.
• Browser console shows missing JS or 404 errors.

Check:

• Network tab for bundle requests.
• Whether the same JS files load in both scenarios.

---

4. Conditional Rendering Based on Issue Context

The Create Issue dialog launched from the dashboard may not provide the same context objects.

Examples:

JavaScript

1

projectKey

2

issueType

3

contextPath

Show more lines

If your component assumes one of these exists, rendering could fail silently.

Check:

JavaScript

1

console.log(window.JIRA);

2

console.log(context);

Show more lines

in both scenarios.

---

5. Race Condition with Lazy Loading

The wikiRendererWebPanel may render after your React initialization code runs.

Example:

1. Modal opens.
2. React mount code executes.
3. Target DOM element does not exist yet.
4. React never mounts.

Check:

JavaScript

1

document.getElementById("your-container")

2

`

Show more lines

before mounting.

Using a MutationObserver is often a reliable solution for dynamically loaded Jira dialogs.

---

6. Module Location Limitations

Some Jira extension points are only guaranteed to render in specific screens.

If the plugin relies on:

XML

1

<web-panel>

Show more lines

or

XML

1

<wikiRendererWebPanel>

Show more lines

the extension may not be supported in every Create Issue variant.

Check:

• Atlassian documentation for the module location.
• Whether the panel markup is completely absent when launched from the dashboard.

---

7. JavaScript Errors Preventing Rendering

A React error occurring before render can stop the UI completely.

Check browser console for:

Plain Text

1

React error

2

TypeError

3

Cannot read property ...

4

Uncaught exception

Show more lines

Compare console output between the working and failing scenarios.

---

8. Dependencies Loaded by Another Plugin

Since the issue only occurs when "other plugins are not present," your React app may unintentionally depend on resources loaded by another plugin.

Examples:

• React loaded globally by another plugin
• Shared libraries (lodash, Atlaskit, AJS)
• Custom global variables

Check:

• Whether all required dependencies are bundled with your plugin.
• Whether the failing page is missing globals that exist on working pages.

---

9. CSP or Resource Loading Restrictions

The dashboard context may have different Content Security Policy or resource loading behavior.

Check:

• Browser console for CSP violations.
• Failed script loads.

---

Recommended First Steps

Compare the working and failing cases using browser DevTools:

1. Is the wikiRendererWebPanel HTML rendered?
2. Is your JS bundle loaded?
3. Does the React mount function execute?
4. Are there JavaScript errors?
5. Is the mount DOM element present when React initializes?

Those five checks usually identify the root cause very quickly.