I was trying to implement a module jira:customFieldType
and wanted the view and edit to be UI Kit 2 (forge/react) and it does not work and is nowhere documented. I only found UI Kit 1 docs and example repos.
So that is what works for now:
package.json
"dependencies": {
"@forge/api": "^4.2.0",
"@forge/bridge": "^4.3.0",
"@forge/react": "^10.10.2",
"@forge/resolver": "^1.5.34",
manifest.yml
jira:customFieldType:
- key: ce-star-rating
name: star rating
description: A rating from one to five stars.
type: number
validation:
expression: value == null || (value >= 0 && value <= 5)
errorMessage: The value must be a number between 0 and 5.
formatter:
expression: "`${'★'.repeat(value)} (${value})`"
export: true
parser:
expression: "Number(value.replace('[^\\d]', ''))"
searchSuggestions:
expression: '["0", "1", "2", "3", "4", 5"]'
readOnly: false
resource: renderCFStarRating
render: native
edit:
resource: editCFStarRating
render: native
resources:
- key: renderCFStarRating
path: src/customfields-ui-kit/renderCFStarRating.jsx
- key: editCFStarRating
path: src/customfields-ui-kit/editCFStarRating.jsx
I get this strange error:
- Minified React error #321 – React
- Minified React error #321 =>
in the lines of hooks like
useState
oruseCallback
I can see that React 16.x is bundled somehow when using forge tunnel
The error looks like this:
My edit code looks like so for now:
editCFStarRating.jsx
//
// UI KIT (forge/react) !!!!!!!!!!
//
import React, { useState, useCallback } from 'react';
import ForgeReconciler, { useProductContext } from '@forge/react';
import { CustomFieldEdit } from '@forge/react/jira';
import { view } from '@forge/bridge';
export const Edit = () => {
// 🔴 NEXT LINE PRODUCES THE ERROR
const [value, setValue] = useState(0);
const context = useProductContext();
let fieldValue = 0;
if (context && context.extension && context.extension.fieldValue) {
fieldValue = context.extension.fieldValue;
}
// 🔴 NEXT LINES PRODUCE THE ERROR
const onSubmit = useCallback(() => {
view.submit(value);
}, [view, value]);
return (
<CustomFieldEdit onSubmit={onSubmit} hideActionButtons>
<>{fieldValue} star (EDIT FORMS TO BE DONE)</>
</CustomFieldEdit>
);
};
ForgeReconciler.render(
<React.StrictMode>
<Edit />
</React.StrictMode>
);
When I remove all the
use*
stuff the view renders just fine.
So what is wrong? I have to mention that I also use Custom UI in the same app, but that gets bundled separately and should not be the root cause of the react version mismatch.
What could be the root cause?
any help is appreciated