XMLHttpRequest is not defined from fetch api

Forge
, ,
1

Hi,
I’m new to Forge platform for Atlassian’s cloud products.
I’m just exploring things, and I’m basically trying consume a rest API that has some data on my server.
but Im having an issue with fetch API, I get the error below:

Something went wrong
There was an error invoking the function - XMLHttpRequest is not defined

ReferenceError: XMLHttpRequest is not defined
    at dispatchXhrRequest (tab.js:7386:19)
    at new Promise (<anonymous>)
    at xhrAdapter (tab.js:7367:10)
    at dispatchRequest (tab.js:13077:10)
    at Axios.request (tab.js:12911:15)
    at Axios.<computed> [as get] (tab.js:12932:17)
    at Function.wrap [as get] (tab.js:7216:15)
    at DataService_DataService.getCurrentWeather (tab.js:13744:28)
    at Object.onChange (tab.js:13757:44)
    at tab.js:7772:30

my code is this:

import ForgeUI, {
  ProjectPage,
  useState,
  Heading,
  Button,
  Macro,
  render,
  Text,
} from "@forge/ui";
import { fetch } from "@forge/api";
const App = async () => {
  const result = await api.fetch("https://jsonplaceholder.typicode.com/todos/1");
  const status = await result.status;

  const [count, setCount] = useState(0);
  return (
    <ProjectPage>
      <Heading size="large"> Here are your key indexes</Heading>
      <Text> Please click here {status}</Text>
      <Button
        text={`Count is ${count}`}
        onClick={() => {
          setCount(count + 1);
        }}
      />
    </ProjectPage>
  );
};

export const run = render(<Macro app={<App />} />);

and my manifest:

modules:
  jira:projectPage:
    - key: some-site-jira-poc-page
      function: main
      title: Some Title
      icon: https://www.somesite.com/_nuxt/img/0b10d18.png
  function:
    - key: main
      handler: tab.run

app:
  id: ari:cloud:ecosystem::app/some-app-id

permissions:
  external:
    fetch:
      backend:
        - '*.typicode.com'
  scopes: []

package json (might be useful to pinpoint):

{
  "name": "forge-ui-starter",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "scripts": {
    "lint": "./node_modules/.bin/eslint src/**/* || npm run --silent hook-errors",
    "hook-errors": "echo '\\x1b[31mThe build failed because a Forge UI hook is being used incorrectly. Forge UI hooks follow the same rules as React Hooks but have their own API definitions. See the Forge documentation for details on how to use Forge UI hooks.\n' && exit 1"
  },
  "devDependencies": {
    "eslint": "^6.5.1",
    "eslint-plugin-react-hooks": "^2.1.2"
  },
  "dependencies": {
    "@forge/api": "^2.3.0",
    "@forge/ui": "^0.13.1"
  }
}
2

You have imported fetch but then you use api.fetch. That does not look right to me.

However, the documentation seems to look like that: https://developer.atlassian.com/platform/forge/runtime-reference/fetch-api/

Checking internally to see what is happening with those docs.

3

Yes, I noticed the same so I took it out, so now it looks like this:

import ForgeUI, {
  ProjectPage,
  useState,
  Heading,
  Button,
  Macro,
  render,
  Text,
} from "@forge/ui";
import { fetch } from "@forge/api";
const App = () => {
  const status = async () => {
    const result =  await fetch("https://jsonplaceholder.typicode.com/todos/1");
    return result.status;
  };

  const [count, setCount] = useState(0);
  return (
    <ProjectPage>
      <Heading size="large"> Here are your key indexes</Heading>
      <Text> Please click here {status()}</Text>
      <Button
        text={`Count is ${count}`}
        onClick={() => {
          setCount(count + 1);
        }}
      />
    </ProjectPage>
  );
};

export const run = render(<Macro app={<App />} />);

Now I’m getting :


Something went wrong
There was an error invoking the function - Unexpected child type: object. Valid children are @forge/ui components, function components, and strings.
Error occurred in Text:
	in ProjectPage
	in App
	in Fragment
	in 

Error: Unexpected child type: object. Valid children are @forge/ui components, function components, and strings.
Error occurred in Text:
	in ProjectPage
	in App
	in Fragment
	in 
    at tab.js:14308:11
    at asyncMap (tab.js:14222:30)
    at async tab.js:14243:29
    at async asyncMap (tab.js:14222:24)
    at async tab.js:14243:29
    at async asyncMap (tab.js:14222:24)
    at async tab.js:14305:23
    at async asyncMap (tab.js:14222:24)
    at async tab.js:14243:29
    at async asyncMap (tab.js:14222:24)
4

I upgraded forge ui to ^0.15.0 I assume its the latest, although the same error above

5

Hi @JalalSordo

I assume this is because the status, when being rendered in your Fragment, it still a promise at that time, which therefore gets rejected by the UI Kit renderer.

Would you mind testing with the following changes:

const fetchStatus = async () => {
  const result =  await fetch("https://jsonplaceholder.typicode.com/todos/1");
  return result.status;
}

const App = () => {
  // new code
  const [status] = useState(async () => await fetchStatus());

  // same as before
  const [count, setCount] = useState(0);
  return ... 
}

Let me know if this fixes it :slight_smile:

1 Like