useProductContext throwing up - Window is not defined

Forge Forge UI Kit and Custom UI
1

Hello, I am new to Forge. When I call useProductContext(), I see the following exception

const getCallBridge = () => {
    if (!isBridgeAvailable(window.__bridge)) {

Exception has occurred: ReferenceError: window is not defined
  at getCallBridge (webpack://jira-project-page-ui-kit-2/node_modules/@forge/bridge/out/bridge.js:9:1)
    at Object.9332 (webpack://jira-project-page-ui-kit-2/node_modules/@forge/bridge/out/invoke/invoke.js:7:1)
    at __webpack_require__ (webpack://jira-project-page-ui-kit-2/webpack/bootstrap:19:1)
    at Object.8350 (webpack://jira-project-page-ui-kit-2/node_modules/@forge/bridge/out/invoke/index.js:4:22)
    at __webpack_require__ (webpack://jira-project-page-ui-kit-2/webpack/bootstrap:19:1)
    at Object.2321 (webpack://jira-project-page-ui-kit-2/node_modules/@forge/bridge/out/index.js:4:22)
    at __webpack_require__ (webpack://jira-project-page-ui-kit-2/webpack/bootstrap:19:1)
    at Object.9415 (webpack://jira-project-page-ui-kit-2/node_modules/@forge/react/out/hooks/useProductContext.js:4:18)
    at __webpack_require__ (webpack://jira-project-page-ui-kit-2/webpack/bootstrap:19:1)
    at Object.9341 (webpack://jira-project-page-ui-kit-2/node_modules/@forge/react/out/index.js:5:27)

My code is very simple -

index.jsx -

const Panel = () => {
  const [data2, setData] = useState(null);
  useEffect(() => {
    invoke('getIssueCount', { example: 'my-invoke-variable' }).then(setData);
  }, []);
  return(
    <>
      <Text>Something about an issue: {data2}</Text>
    </>
  );
}


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

index.js -

resolver.define('getIssueCount', (req) => {
  console.log(req);
  const context = useProductContext();
  return JSON.stringify(context);
});

export const handler = resolver.getDefinitions();

Can someone help me out here please. Thanks.

2

Hi @IbrahimSaid ,

Welcome to the Atlassian Developer Community.

When I call useProductContext()…

It looks like this error is occurring during the initial rendering of your panel, specifically when the invoke method is called, and it doesn’t seem to have anything to do with your invocation of useProductContext from your resolver. Can you confirm this and can you share your manifest.

Dugald

3

Hi Dugald,

I don’t think I am able to say it with certainty but I can tell you this - the error pops up only when I call useProductContext.

Here’s my manifest -

modules:
  jira:projectPage:
    - key: eighthapp-hello-world-project-page
      resource: main
      resolver:
        function: resolver
      render: native
      title: EighthApp
  jira:issuePanel:
    - key: my-issue-panel
      title: My Issue Panel
      resource: main
      resolver: 
        function: panel
      render: native
      icon: http://developer.atlassian.com/platform/forge/images/issue-panel-icon.svg
  function:
    - key: resolver
      handler: index.handler
    - key: panel
      handler: index.panel
resources:
  - key: main
    path: src/frontend/index.jsx
app:
  runtime:
    name: nodejs18.x
  id: ari:cloud:ecosystem::app/7f983d49-36c1-47f1-846c-a3af870f4761
permissions:
  scopes: 
  - read:jira-work

Thank you.

4

Hi @IbrahimSaid,

I believe useProductContext() should be used in your index.jsx rather than in the resolver. It requires access to the window object of the DOM to return the correct information.

You should try getting the context before calling the resolver and send what you need from it as part of the payload.

Hope this helps!

1 Like
5

@IbrahimSaid you can access context information when creating resolver functions using the forge resolver.

from your example - the getIssueCount resolver receives this information in req

resolver.define('getIssueCount', (req) => {
  console.log(req);

if you look at the output of console.log(req) in your forge tunnel, you’ll be able to see the context information available. If there’s something further you need, you can pass it from the front end when you call a resolver function.

Hope this helps!
Melissa

2 Likes
6

Took Bill’s advice and moved useProductContext to index.jsx. It worked. Thank you, all…much appreciated!

1 Like