Hello, I am new to forge....I am getting the below error after following the steps in the documentation section: Call a Jira API

Forge
1

This is the error:

Something went wrong
Trace ID: 5ff0bfeb0eda49f7ae800517c2f6d049
There was an error invoking the function - window is not defined

ReferenceError: window is not defined
    at getCallBridge (webpack://jira-issue-panel-ui-kit/node_modules/@forge/bridge/out/bridge.js:9:1)
    at Object.332 (webpack://jira-issue-panel-ui-kit/node_modules/@forge/bridge/out/invoke/invoke.js:7:1)
    at __webpack_require__ (webpack://jira-issue-panel-ui-kit/webpack/bootstrap:19:1)
    at Object.350 (webpack://jira-issue-panel-ui-kit/node_modules/@forge/bridge/out/invoke/index.js:4:1)
    at __webpack_require__ (webpack://jira-issue-panel-ui-kit/webpack/bootstrap:19:1)
    at Object.321 (webpack://jira-issue-panel-ui-kit/node_modules/@forge/bridge/out/index.js:4:1)
    at __webpack_require__ (webpack://jira-issue-panel-ui-kit/webpack/bootstrap:19:1)
    at <anonymous> (webpack://jira-issue-panel-ui-kit/webpack/runtime/make%20namespace%20object:7:1)
    at <anonymous> (webpack://jira-issue-panel-ui-kit/src/index.jsx:35:1)
    at Object.<anonymous> (webpack://jira-issue-panel-ui-kit/src/index.jsx:35:1)

Refresh app

This is my code:

import { requestJira } from '@forge/bridge';
import ForgeUI, { render, Fragment, IssuePanel } from '@forge/ui';
import ForgeReconciler, { Text, useProductContext } from '@forge/react';
import React from 'react'

const App = () => {
  const context = useProductContext();

  const [comments, setComments] = React.useState();
  console.log(`Number of comments on this issue: ${comments?.length}`);

  const fetchCommentsForIssue = async () => {
    const issueId = context?.extension.issue.id;

    const res = await requestJira(`/rest/api/3/issue/${issueId}/comment`);
    const data = await res.json();
    return data.comments;
  };

  React.useEffect(() => {
    if (context) {
      // extract issue ID from the context
      const issueId = context.extension.issue.id;
  
      fetchCommentsForIssue(issueId).then(setComments);
    }
  }, [context]);
  
  return (
    <Fragment>
      <Text>Hello welcome to my Forge App</Text>
    </Fragment>
  );
};

export const run = render(
  <IssuePanel>
    <App />
  </IssuePanel>
);

and this is my manifest:

modules:
  jira:issuePanel:
    - key: panelish-hello-world-panel
      function: main
      title: My Panelish
      icon: https://developer.atlassian.com/platform/forge/images/icons/issue-panel-icon.svg
  function:
    - key: main
      handler: index.run
app:
  runtime:
    name: nodejs18.x
  id: ari:cloud:ecosystem::app/b9c9a9a6-1af0-42ee-bc52-767c8f56a5c5
permissions:
  scopes:
    - read:jira-work
2

Hey @Evans,

Thanks for reaching out!
It looks like you might be using an old tutorial for the original version of UI Kit - for the current version of UI kit, we don’t use ForgeUI.

I’d love to know where you found this in our docs so I can update it!

In the interim, I’d suggest following the steps outlined at https://developer.atlassian.com/platform/forge/call-a-jira-api/ which will work for the latest release of UI Kit.

Hope that helps, but if you run into any more issues don’t hesitate to ask.

Cheers!
Mel

2 Likes
3

Hello, Thank you for the help and feedback.
This is the link to the tutorial which I was following https://developer.atlassian.com/platform/forge/call-a-jira-api/

Actually the forgeUI import came as boiler plate code when I created a new forge app using forge create, and choose my template as the jira issue panel

4

Hello again, I have followed the steps exactly as they are in the documentation but I am still getting the same error

5

I see. In that case, @Evans can you confirm your Forge cli version - it sounds like it might be outdated.

To check the version, use the command forge --version

If you have a version before 9.x installed, I’d strongly recommend updating to the latest version using the command npm install -g @forge/cli@latest and then running forge create and following the tutorial steps once again.

If your forge cli is a version greater than 9, is it possible you selected something other than what was recommended in the tutorial when you ran the forge create command?

Hope this helps!
Mel

1 Like
7

I figured out what the issue was, I had selected the wrong template

I created another project but now the issue panel is not loading the content
Screenshot from 2024-06-25 11-00-39

8

Hey @Evans
Sorry to hear you’re still stuck!
Are you able to share the src/frontend/index.jsx you created using the correct template so I can take a look?
Cheers!
Mel

9

Here it is

type or paste code here
```import React from 'react';
import ForgeReconciler, { Text, useProductContext } from '@forge/react';
import { requestJira } from '@forge/bridge';

const App = () => {
  const context = useProductContext();

  // add these code to keep track of comments
  const [comments, setComments] = React.useState();
  console.log(`Number of comments on this issue: ${comments?.length}`);

  const fetchCommentsForIssue = async () => {
    // extract issue ID instead expecting one from function input
    const issueId = context?.extension.issue.id;

    // modify to take issueId variable
    const res = await requestJira(`/rest/api/3/issue/${issueId}/comment`);
    const data = await res.json();
    return data.comments;
  };

  React.useEffect(() => {
    if (context) {
      // extract issue ID from the context
      const issueId = context.extension.issue.id;

      fetchCommentsForIssue().then(setComments);
    }
  }, [context]);

  return (
    <>
      <Text>Hello world!</Text>
    </>
  );
};
ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
10

Hey @Evans
I’ve just tested this by pasting it into an app I created using the CLI and it’s working fine for me using the steps outlined.
It looks like you followed the steps in the Set required permissions section to add the required scope to the manifest.yml

permissions:
  scopes:
    - read:jira-work

Did you also re-deploy the app and then run the forge install --upgrade command?

When you change the permissions, you need to deploy and then upgrade each time.

If you’re still stuck it’d also be worth checking the logs in the browser and the terminal. If you don’t see any errors there, share the manifest.yml for your new app.

Cheers!
Mel

2 Likes