CustomFieldEdit throws encountered unknown component

Forge Forge UI Kit and Custom UI
, , ,
1

Hello,

I cant get the CustomFieldEdit to work.

Package.json

  "devDependencies": {
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0"
  },
  "dependencies": {
    "@forge/bridge": "^4.5.0",
    "@forge/react": "^11.1.0",
    "@forge/resolver": "1.6.9",
    "@types/jest": "^29.5.14",
    "ts-jest": "^29.3.1"
  }

Manifest

modules:
  jira:customFieldType:
    - key: developertest-configurable-validation
      name: DeveloperTest
      description: A basic custom field with a configurable validation.
      type: string
      validation:
        expression: value == null || !!value.match(configuration?.regexp || "^[A-Za-z]+$")
        errorMessage: The value is invalid
      edit:
        resource: edit
        render: native
        isInline: true
resources:
  - key: edit
    path: src/customui/customfields/TestCustomField/index.jsx

And the File itself:

import * as React from 'react';
import ForgeReconciler, { Textfield, useProductContext } from '@forge/react';
import { CustomFieldEdit } from '@forge/react/jira';
import { view } from '@forge/bridge';

export const Edit = () => {
  const [value, setValue] = React.useState(0);

  const context = useProductContext();
  let fieldValue = 0;
  if (context && context.extension && context.extension.fieldValue) {
    fieldValue = context.extension.fieldValue;
  }
  const onSubmit = () => {
    view.submit(value);
  }

  const onChange = () => {
    setValue(1);
  };
  return (
    <CustomFieldEdit
      onSubmit={onSubmit} >
        <Textfield id="text-field" value={value} onChange={onChange} />
      </CustomFieldEdit>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <Edit />
  </React.StrictMode>)

It states it can’t find the component, I suppose from the Reconciler

Screenshot 2025-04-02 at 14.28.48
Screenshot 2025-04-02 at 14.28.48587×110 10.4 KB

2

Hi AuerAlexander,

can you double-check the module name in your manifest? I’m able to use CustomFieldEdit with the module jira:customField, not jira:customFieldType.

Cheers,
Jonathan

3

After facing multiple issues and limitations, I switched to ‘Custom UI inside UI Kit’, via Frame component. I wouldn’t recommend it for your case, but if you’re completely stuck with UI Kit, it might be a viable workaround.

import ForgeReconciler, {
  Frame,
} from '@forge/react';
import React from 'react';

const GenericFieldView = () => {
  return (
    <Frame resource="custom-ui-res" />
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <GenericFieldView />
  </React.StrictMode>,
);