Issue: jsoneditor icons not loading in Jira 10 plugin

[Pratik Sunil Lodha]

I am using jsoneditor (v9.5.5) with jsoneditor-react (v3.1.1) inside a Jira 10.3.5 plugin (Atlassian SDK + Webpack + WrmPlugin).

The editor renders correctly, but toolbar icons are missing.

Observed Behavior

• JSON editor loads (ACE editor visible)
• Toolbar buttons appear but icons are not visible
• Browser shows 404 errors for SVG files

URL

/jira/s/4f4f0347-6611-4af8-a321-6490b03f0123/_/download/resources/<pluginkey>:assets-4f4f0347-6611-4af8-a321-6490b03f0123/63746aaedac0bb62c3a6.svg

How to correctly map jsoneditor SVG assets in Jira 10 (WrmPlugin / Webpack)?

[Pratik Sunil Lodha · Accepted solution]

I was facing an issue with SVG files not being processed correctly in my Webpack 5 setup while working with Atlaskit components. Webpack was trying to interpret .svg files as JavaScript, which caused build failures.

Solution:

The issue was resolved by adding a rule in webpack.config.js to handle SVG files as inline assets:

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset/inline'
      }
    ]
  }
};

Why this works:

Webpack 5 uses asset modules by default, but without this rule, .svg files may not be handled correctly in certain setups (especially with Atlaskit). By specifying asset/inline, SVGs are converted into data URLs, which avoids parsing issues.

Important Notes:

• Ensure this rule is added before any generic image/file loader rules.

• If you have a rule like test: /\.(png|jpg|gif|svg)$/, remove svg from it to avoid conflicts.

After adding this configuration, the build worked as expected.

Hope this helps anyone facing a similar issue .

[Himanshu Tiwary · Accepted solution]

Hi @Pratik Sunil Lodha ,
Welcome to the commnunity
This is not a jsoneditor issue  it is an asset serving issue in Jira.

jsoneditor toolbar icons come from SVG files referenced by its CSS.
Your editor loads, but Jira returns 404 for those SVGs because they are not being exposed as downloadable web resources in the plugin.

What I’d do

Keep importing the editor CSS.
Make Webpack handle .svg as a real asset (asset/resource or file-loader).
Make sure the emitted SVG folder is included in Jira as a download/web resource.
If you want the simplest fix, inline the SVGs instead so Jira does not need to serve separate icon files.

Example Webpack rule:

module.exports = {
module: {
rules: [
{
test: /\.svg$/i,
type: 'asset/resource',
generator: {
filename: 'assets/[name][ext]'
}
}
]
}
};

And in atlassian-plugin.xml, expose that folder:

<web-resource key="my-editor-resources" name="My Editor Resources">
<resource type="download" name="assets/" location="assets"/>
<resource type="download" name="bundle.js" location="bundle.js"/>
<resource type="download" name="bundle.css" location="bundle.css"/>
</web-resource>

So the fix is basically: don’t just bundle the JS/CSS — also expose the SVG icon files through WRM.
If you don’t, Jira 10 will load the editor but the toolbar icons will stay blank with 404s.

In practice, the easiest Jira-safe approach is often to inline those SVGs and avoid separate requests entirely.

[Pratik Sunil Lodha]

Hi @Himanshu Tiwary ,

Thanks for the detailed explanation — really appreciate the effort 👍

I understand your point about exposing SVGs via web resources, and that approach makes sense for proper asset handling in Jira.

In my case, I ended up resolving the issue using a different approach by inlining the SVGs directly through Webpack:

{
  test: /\.svg$/,
  type: 'asset/inline'
}