Hi There I am trying to build My custom JIRA FILTER Macro fro the confluence cloud using Forge and I was enabled until now to build the macro and deploy and install it with no problems. Still, when I start trying to retrieve data from Jira I run through several errors and this one didn’t understand why it’s showing :
the error is :
Something went wrong
Trace ID: 85a19c30cbae3d54
There was an error invoking the function - Cannot convert a Symbol value to a string
TypeError: Cannot convert a Symbol value to a string
at /tmp/tunnel7pqpe64wFMcEU/index.js:2628:90
at asyncMap (webpack://confluence-macro-ui-kit/node_modules/@forge/ui/out/reconcile.js:13)
at /tmp/tunnel7pqpe64wFMcEU/index.js:2625:29
at async asyncMap (webpack://confluence-macro-ui-kit/node_modules/@forge/ui/out/reconcile.js:13)
at async /tmp/tunnel7pqpe64wFMcEU/index.js:2563:29
at async asyncMap (webpack://confluence-macro-ui-kit/node_modules/@forge/ui/out/reconcile.js:13)
at async /tmp/tunnel7pqpe64wFMcEU/index.js:2625:23
at async /tmp/tunnel7pqpe64wFMcEU/index.js:1953:31
and my codes are for now :
index.jsx :
import ForgeUI, { render, Macro, Button, Text, TextField, useState, useAction } from '@forge/ui';
import api, { route } from '@forge/api';
import React from 'react';
const JiraMacro = () => {
const [jql, setJql] = useState(''); // Set the initial JQL query here
const [issues, setIssues] = useState([]);
const handleSearch = useAction(async () => {
try {
const response = await api.asUser().requestJira(route`/rest/api/3/search?jql=${jql}`);
const data = await response.json();
const jiraIssues = data.issues;
setIssues(jiraIssues);
} catch (error) {
console.error(error);
}
});
return (
<>
<TextField
label="JQL Search"
value={jql}
onChange={setJql} />
<Button text="Search" onClick={handleSearch} />
<table className="table">
<thead>
<tr>
<th>Key</th>
<th>Summary</th>
<th>Created</th>
<th>Updated</th>
<th>Reporter</th>
<th>Status</th>
<th>Peppol Domain</th>
<th>PEPPOL Member Company</th>
<th>CMB ReleaseNo</th>
</tr>
</thead>
<tbody>
{issues.map(issue => (
<tr key={issue.id}>
<td>{issue.key}</td>
<td>{issue.fields.summary}</td>
<td>{issue.fields.created}</td>
<td>{issue.fields.updated}</td>
<td>{issue.fields.reporter.displayName}</td>
<td>{issue.fields.status.name}</td>
<td>{issue.fields.customfield_1}</td>
<td>{issue.fields.customfield_2}</td>
<td>{issue.fields.customfield_3}</td>
</tr>
))}
</tbody>
</table>
</>
);
};
export const run = render(
<Macro app={<JiraMacro />} />
);
and the package.json :
{
"name": "confluence-macro-ui-kit",
"version": "1.0.13",
"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": "^7.32.0",
"eslint-plugin-react-hooks": "^4.2.0"
},
"dependencies": {
"@forge/api": "^2.18.1",
"@forge/ui": "^1.9.0",
"react": "^18.2.0"
}
}
Please anything needed like more info I can provide but please any advice will be very appreciated