Cannot read properties of undefined (reading 'type') - Error when trying to use ContextMenu in Confluence Cloud

I am trying to build a Confluence Forge App that uses the Context Menu module and the latest UI Kit. The code compiles and deploys successfully. I can highlight text on a confluence page and see the Context Menu. I see my application (in development) but when I click it a message pops up with the following error:

The developer tools show an error with the same message
Here is my index.jsx code

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

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

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

This seems to follow the documentation. Can anyone help me figure out why I am seeing this error?

Thank you!

Hi! it looks like you use ui kit with custom ui. I think you created a custom ui resource and try to use UI KIT2 there. It will not work. If you want to use UI KIT you do not have to use custom ui. Just create a new app out of “forge create” command and choose UI KIT and then Confluence.

Hello @alex_sam! Thank you for you guidance. I didn’t realize that when you select UI Kit and the correct module, you don’t need those top level elements.

Recreating the app using the templates, I was able to resolve the issue.

Thanks again

1 Like