Issue: jsoneditor icons not loading in Jira 10 plugin

Question

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/:assets-4f4f0347-6611-4af8-a321-6490b03f0123/63746aaedac0bb62c3a6.svg How to correctly map jsoneditor SVG assets in Jira 10 (WrmPlugin / Webpack)?

Himanshu Tiwary_go407r · Accepted Answer

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: 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 · Accepted Answer

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 .