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

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.

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:

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:

4 Likes