Hello World - Part 2: Call a Jira API - Cannot read property 'length' of undefined

Forge
, , ,
1

Hi everyone,

I’m trying to build the hello world app, Part 2 - Call a Jira API, and I got stuck on the following error:

invocation: 05a96a93ede880b0 index.run
ERROR   23:06:54.527  05a96a93ede880b0  Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at Object.App [as type] (webpack:///src/index.jsx:13)
    at /tmp/tunnel6YYymoAqAdRzU/index.js:29016:36
    at async asyncMap (webpack:///node_modules/@forge/ui/out/reconcile.js:13)
    at async /tmp/tunnel6YYymoAqAdRzU/index.js:28978:29
    at async asyncMap (webpack:///node_modules/@forge/ui/out/reconcile.js:13)
    at async /tmp/tunnel6YYymoAqAdRzU/index.js:29034:23
    at async /tmp/tunnel6YYymoAqAdRzU/index.js:28907:31

Docker -v
Docker version 19.03.13-ce, build 4484c46
node -v
v12.20.2 (I also have the latest LTS version installed and throws the same error message)

package.json

{
  "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": "^0.7.0",
    "@forge/ui": "^0.8.0",
    "react": "^16.14.0"
  }
}

I’ve installed react@^16.8.0 after running npm install @forge/api. However, I’ve tried without installing this dependency, and I got the same error.

When I print ${comments} only, I get “Number of comments on this issue: undefined”.

console.log(`Number of comments on this issue: ${comments}`);

It seems that the object “comments” is returning null, and I can’t access any of its properties. BTW, I’m running it on AWS EC2 Linux 2.

Has anyone experienced something similar that could help me on this one?

Thanks,
Ivan.

2

Hi,

What you are experiencing is not actually forge specific but common in the “Async JS World” :slight_smile:

You might use some kind of useEffect hook to fetch the comments.
But at the point in time before the useEffect hook can actually get your comments,
your comments variable is undefined. Calling comments.length leads to the “TypeError: Cannot read property length of undefined”. (If you are an Java Developer you might know the NullPointerException)

Once the useEffect is finished calling the REST API the comments variable will then have a valid Array of data and you can call “comments.length”.

So what you have do do is simple:
(1) Always check with an IF for undefined/null e.g.

console.log(`Number of comments on this issue: ${comments ? comments.length : 'loading'}`);

// if (comments) { console.log('ok') }
// -- is equal to
// if (comments !== undefined && comments !== null) { console.log('ok') }
// -- depends on your coding style what you want to write

(2) Do not console.log an object or array. Use JSON.stringify if you want to log the object/array to console:

console.log(`comments ${comments ? JSON.stringify(comments, null, 2) : 'loading'}`);

I hope that solves the issue for you. If not maybe you can paste a little more code so we can see what is going on :slight_smile:

3

It makes sense what you described. I haven’t changed it since it’s basically a copy and paste from the tutorial. However, your notes shed some light on exploring the console.log in other points in the code. It turned out that I found a 403 forbidden error that explained the undefined object. I removed the app and redeployed/reinstalled it, forcing a new authorization. It’s all good now. Thanks for your help. :+1:

5 Likes
4

Hi,

I am getting the same problem, I did a ‘forge uninstall’ and ‘forge install’, but that did not help my situation.

I do notice however, that in the Network tab in the Developer tool, there is no request sent out to the endpoint ‘/rest/api/content’, so I am not seeing any error, but believe the rest call is not going out.

I added logging in the function ‘fetchCommentsForContent’ and it indeed gets called and terminates, but no data is ever retrieved.

Any ideas?

5

Further investigation, I do get the following error, this is a 409 error from the following api call:

Request:
https://xxxxxx.atlassian.net/gateway/api/engage-targeting/api/v2/user/d7d5d343-3241-43cf-9867-a7915644ed1e/messages/confluence-onboarding-state-update/start

Response:
{status: “Conflict”, message: “User is not enrolled in message ‘confluence-onboarding-state-update’”,…}

  1. errors:
  2. message: “User is not enrolled in message ‘confluence-onboarding-state-update’”
  3. status: “Conflict”

Maybe there is something else at play with my system/confluence instance?

6

For those interested in the resolution, this was the result of unauthorised call.

Basically the tutorial and the utility “forge lint --fix” does not do what the tutorial suggests. It seems that the linter DOES NOT inspect the api’s used and DOES NOT provide the permissions needed in the scope for the app to work.

I had to research permissions, and through trial and error, found that I needed to manually add the permission “read:confluence-content.all” to the scopes list.

If this is needed to be done for every call for the many API’s, then this is going to be a hard and frustrating journey getting api calls working using forge.

I hope Atlassian have realized that this is unworkable and that they do provide a utility to automatically detect and add missing permissions for Forge apps…

7

This exact same sequence worked for me. The dreaded “TypeError: Cannot read property length of undefined” is very popular in the async world esp when dealing with react props. javascript - Error Message React: Uncaught TypeError: Cannot read property 'length' of undefined () - Stack Overflow But, your solution to “forge uninstall”, “forge reinstall” and grant access to the app worked like a charm and saved me ton of time.

8

The hint with forge uninstall and forge install was the key for me.

The tutorial misses, that the tunnel and the install command do not redeploy the manifest file.
I solved the issue by doing the following.

  1. Stop the tunnel
  2. forge deploy
  3. forge install --upgrade
  4. forge tunnel
1 Like
9

What you are experiencing is not actually forge specific…

This actually is Forge-specific and what makes it so is (A) this code is taken directly from Forge documentation (see call-a-jira-api) and (B) it’s somewhat confusing to see this, but comments is actually the fully resolved result at the point where the error occurs – it is not an unresolved promise as you might have expected.

As others have noted, this error is actually due to a permissions issue in which the manifest.yml permissions are not updated in the deployed app until you run forge install --upgrade.