@Forge/React Components Render w/out Styling or Functionality

Forge Forge UI Kit and Custom UI
1

I am building a Custom UI based JIRA plugin for my Atlassian instance.

When React renders “complex” components listed from the Forge UI kit documentation, there is seemingly no styling and the components simply collapse.

I have had success testing a primitive component - Text. It seems that wrapping a basic message with Text applies the Atlassian native font. (This was after I made sure to include the Atlaskit css-reset import at the root of my app).

As soon as a I begin to wrap simple text with other components (ex. SectionMessage) the styling does not apply. This is even worse with form-related components where the resulting render is just a collapsed view of the intended header labels (form is completely unusable).

For dependencies I have the following:

"@atlaskit/css-reset": "^6.6.2",

"@forge/bridge": "5.5.0",

"@forge/react": "^11.3.0",

"react": "18.2.0",           

"react-dom": "18.2.0"

Perhaps the community can share a known working package.json for this type of project?

Any insights would be greatly appreciated!

1 Like
2

Hey @AlpAlakoc

Apologies - are you building your app with UI Kit or a Custom UI frontend?

It sounds like you’re using Custom UI - so I’ll answer accordingly:

UI Kit components are not intended to be used in Custom UI apps - so I wouldn’t expect that they’d render as expected (if at all) - this is because the ForgeReconciler does some work behind the scenes to make everything function in UI Kit apps. So, to use UI Kit components and have them render as expected you’d need to build a UI Kit app, for Custom UI your best bet would be to use the Atlaskit packages directly

I hope this explanation makes sense. If you are in fact using UI Kit, and you’re having difficulties, please share the modules from your manifest so I can help further.

Cheers!
Mel

3

Thank you for pointing me in the right direction Mel!

I overhauled the project to utilize the atlaskit components and have made significant progress (components work like a charm).

I did not realize (nor did I read anywhere on the Forge docs) that the Forge/react components were incompatible with Custom UI projects. :pensive_face:

Cheers!

4

No worries, thanks for the feedback re the docs - I’ll make sure to pass that feedback on to the appropriate team.

Cheers!
Mel

6

love :two_hearts:

7

Hello @mpaisley ,

So the components from @forge/react can only be used in modules that are specified with render: native in the manifest, right?

Best
Kuba

8

That’s right, but also keep in mind they need to be used with the ForgeReconciler

eg:

import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Text } from '@forge/react';
import { invoke } from '@forge/bridge';

const App = () => {
  return (
    <>
      <Text>Hello world!</Text>
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
9

Thank you! It would be great to clarify this in the docs that Forge UI Kit cannot be used in Custom UI, as I’ve hit this myself after tinkering with the code for quite a bit. One sentence which could save quite a bit of time for all Forge devs out there.

Best
Jakub

1 Like
10

love :two_hearts:

11

Yep, sorry I forgot to say that in my original post but I have put in an improvement suggestion for the docs as well.