Forge: CustomFieldType UI Kit 2 (forge/react) render/edit problem

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:

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>
);

:zap: 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 :slight_smile:

Ok I used forge create and used everything from there. What seems to have been missing was in package.json the "react": "^18.2.0", dependency.