Forge Frame Tutorial - Uncaught TypeError: n.render is not a function

Forge Forge UI Kit and Custom UI
,
1

Hi everyone,

I’m working through the Forge UI Kit Frame component tutorial and have run into a blocking issue when the application loads in the browser.

Tutorial Link: https://developer.atlassian.com/platform/forge/ui-kit/components/frame-tutorial

The Error

When I view the app, the frame component does not render and the browser console shows the following error:

Uncaught TypeError: n.render is not a function

What I’ve Tried

My first assumption was that this error was due to changes in React 18+, where ReactDOM.render is deprecated.

The original code in the resources/project-logo-display/src/index.js file used the old method:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

To fix this, I changed my code to use createRoot from react-dom/client, which is the correct approach for React 18+ :

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Despite this change, I am still getting the exact same error and can’t seem to find a solution.

Has anyone else come across this situation or have any insights on what might be causing it? Any help would be greatly appreciated!

2

The way that Forge React apps work now (and what I get when I use forge create now, like in the tutorial and then move App to a separate file) is like this:

import React from 'react';
import App from './App';

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

I don’t think there’s any need to create a root.

3

Hey @RodrigoRodrigues,

Thanks for this feedback, I’ll have a look to see if we need to update the tutorial to reflect this change.

In the meantime, did @AaronCollier’s suggestion above help you resolve the issue?

Cheers!
Mel

1 Like
4

Hi, @RodrigoRodrigues

could we confirm that the error that you are encountering is just on the Frame component part. That is, you can still see part of your app (the UI Kit part), just that the Frame component part is not loading?

If that’s the case, could you please try make sure your rebuild the source code of your Frame component (i.e. cd resources/project-logo-display/ and then yarn build ) . This will ensure that the app is loading the correctly built Frame resources. (that is, if you made the code change to adapt React 18, it should show a different error, if it is showing the same error, it might be because the code is not built properly ).

Thanks.

1 Like
5

Hello @mpaisley,

I tried @AaronCollier suggestion but I still get the same error, unfortunately.

Best regards,
Rodrigo

6

Hi, @SolomanWeng,

I followed those steps and I got the frame component to show on screen. However, it seems to be a little broken, at least the design is, as you can see in the image. In addition, in order to get the frame component to show up I had to use my original code with createRoot(), and not follow @AaronCollier suggestion.

Screenshot 2025-07-23 at 08.31.42
Screenshot 2025-07-23 at 08.31.421502×1188 98.4 KB

Thanks for the help!
Rodrigo

7

Hi, @RodrigoRodrigues nice! you have done the correct setup here.

With React 18, you do have to use

import { createRoot } from 'react-dom/client';
....

as you suggested. We will also review the documentation to see if we should adapt for React 18+ as well.

The code inside Frame resource are can be done through any javascript framework (any React version, Vue.js, etc.), hence it is up to the developers to setup them up properly.

However, it seems to be a little broken

I assume you mean the stying seems not to be applied properly, it could be that there are some additional setup you need to do to configure the ADS component library properly, maybe you could check a bit further on (Overview - Marketplace partners - Atlassian Design System) .

image
image1610×472 38.2 KB

This, tutorial mainly focuses on setting up a Frame component in the UI Kit app, hence there could be some minor details missing that are not directly related to the topic. But we will also have a review on our example repository to ensure it should work as expected.

Thanks so much for reaching out and communicating how you setup the code for React 18 :heart:

1 Like