Using SVG images in Custom UI Pages

Hello, Forge folks!

I’m trying to use the react-sortable-tree package GitHub - frontend-collective/react-sortable-tree: Drag-and-drop sortable component for nested data and hierarchies for one of my tests with Forge. but it looks like it doesn’t load the SVG images correctly. I just created a forge app with jira:globalPage module and then content of App.js like this

import React, {useEffect, useState} from 'react';
import {invoke} from '@forge/bridge';
import SortableTree from "react-sortable-tree";

function App() {
    const [data, setData] = useState(null);

    useEffect(() => {
        invoke('getText', {example: 'my-invoke-variable'}).then(setData);
    }, []);

    const treeData = [
        {title: 'Chicken', children: [{title: 'Egg'}]},
        {title: 'Fish', children: [{title: 'fingerline'}]},
    ]

    return (
        <div>
        <div>
            {data ? data : 'Loading...'}
        </div>
            <div style={{ height: 400 }}>
        <SortableTree
            treeData={treeData}
        />
            </div>
        </div>
        );
}

export default App;

Expected result should look like this
Screen Shot 2022-08-04 at 18.16.34
but it looks like this
Screen Shot 2022-08-04 at 18.17.01
I added these permissions to manifest to see if it helps

permissions:
  content:
    styles:
      - 'unsafe-inline'
    scripts:
      - 'unsafe-hashes'
      - 'unsafe-eval'
      - 'unsafe-inline'

but it doesn’t.

Do you have any comments?

Can you share the errors that are showing up in the browser console with those load failures?

So sorry, I just realized I missed the most important step in the documentation of the package. Missing css import.

1 Like