Unable to open ModalDialog

Hello, I am trying to display a Modal Dialog and nothing is displayed. Here’s the code

index.jsx

import ForgeReconciler, { useProductContext, Text, ModalDialog } from '@forge/react';

const Action = () => {
  console.log("Performing an action2");
  return(
    <ModalDialog header='New Dialog'>
      <Text>This is a test</Text>
    </ModalDialog>
  )
}
  


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

manifest.yml

  jira:issueAction:
    - key: my-issue-action
      title: Perform Action
      resource: main
      resolver:
        function: action
      render: native
  function:
    - key: resolver
      handler: index.handler
    - key: action
      handler: index.action

Everytime I click the IssueAction, this is the error I see on the chrome console -

main.js:2 Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at ci (main.js:2:140834)
    at e (main.js:2:87845)
    at Aa (main.js:2:99810)
    at _o (main.js:2:144295)
    at Go (main.js:2:134202)
    at Wo (main.js:2:134130)
    at Qo (main.js:2:133993)
    at Vo (main.js:2:131229)
    at Xt (main.js:2:73441)
    at Io (main.js:2:128325)
Ea @ main.js:2
Fa.r.callback @ main.js:2
Xr @ main.js:2
Dl @ main.js:2
Rl @ main.js:2
Nl @ main.js:2
(anonymous) @ main.js:2
Yo @ main.js:2
Vo @ main.js:2
Xt @ main.js:2
Io @ main.js:2
t.updateContainer @ main.js:2
render @ main.js:2
(anonymous) @ main.js:2
(anonymous) @ main.js:2
(anonymous) @ main.js:2
main.js:2 Uncaught Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at ci (main.js:2:140834)
    at e (main.js:2:87845)
    at Aa (main.js:2:99810)
    at _o (main.js:2:144295)
    at Go (main.js:2:134202)
    at Wo (main.js:2:134130)
    at Qo (main.js:2:133993)
    at Vo (main.js:2:131229)
    at Xt (main.js:2:73441)
    at Io (main.js:2:128325)
ci @ main.js:2
e @ main.js:2
Aa @ main.js:2
_o @ main.js:2
Go @ main.js:2
Wo @ main.js:2
Qo @ main.js:2
Vo @ main.js:2
Xt @ main.js:2
Io @ main.js:2
t.updateContainer @ main.js:2
render @ main.js:2
(anonymous) @ main.js:2
(anonymous) @ main.js:2
(anonymous) @ main.js:2
Show 12 more frames
Show less
2react-dom.profiling.min.js:205 TypeError: Cannot read properties of undefined (reading 'type')
    at h (RendererNextComponent.js:141:52)
    at o$ (react-dom.profiling.min.js:182:207)
    at u (react-dom.profiling.min.js:320:407)
    at lv (react-dom.profiling.min.js:306:180)
    at react-dom.profiling.min.js:305:229
    at l_ (react-dom.profiling.min.js:305:235)
    at lu (react-dom.profiling.min.js:297:328)
    at iR (react-dom.profiling.min.js:142:174)
    at ln (react-dom.profiling.min.js:77:22)
    at a_ (react-dom.profiling.min.js:197:34)
    at reconcile (WebRuntime.js:58:7)
    at Object.reconcile (createBridgeApi.js:28:25)
    at reconcile (useBridge.js:193:37)
    at metrics.js:27:26
    at Object.handler (bridge-provider.js:61:24)
    at post-robot.js:1727:32
    at e.try (post-robot.js:621:37)
    at u.type.on (post-robot.js:1724:42)
    at ej (post-robot.js:1740:9)
    at post-robot.js:2135:41
    at e.try (post-robot.js:621:37)
    at t (post-robot.js:2128:57)
    at o (helpers.ts:98:1)
aj @ react-dom.profiling.min.js:205
o.componentDidCatch.r.callback @ react-dom.profiling.min.js:207
oc @ react-dom.profiling.min.js:159
sD @ react-dom.profiling.min.js:285
e @ react-dom.profiling.min.js:310
(anonymous) @ react-dom.profiling.min.js:310
lE @ react-dom.profiling.min.js:312
lu @ react-dom.profiling.min.js:298
iR @ react-dom.profiling.min.js:142
ln @ react-dom.profiling.min.js:77
a_ @ react-dom.profiling.min.js:197
reconcile @ WebRuntime.js:58
(anonymous) @ createBridgeApi.js:28
reconcile @ useBridge.js:193
(anonymous) @ metrics.js:27
(anonymous) @ bridge-provider.js:61
(anonymous) @ post-robot.js:1727
e.try @ post-robot.js:621
u.type.on @ post-robot.js:1724
ej @ post-robot.js:1740
(anonymous) @ post-robot.js:2135
e.try @ post-robot.js:621
t @ post-robot.js:2128
o @ helpers.ts:98
Show 24 more frames
Show less
1:1 The resource https://jira-frontend-bifrost.prod-east.frontend.public.atl-paas.net/assets/shared.0d01237d.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Not sure what’s going on here…can someone help please.

From the use of ForgeReconciler it seems you’re using the latest version of the UI Kit (formerly known as UI Kit 2). That version doesn’t have ModalDialog (see the list of breaking changes). See an example on setting up a modal.

1 Like

Thank you, Aaron. That worked.