How to migrate from UI Kit 1 to latest

Forge Forge UI Kit and Custom UI
1

Hi,

I am a bit stuck on how to migrate from UI kit 1 to the latest UI Kit.

This is my manifest.yml:

modules:
  jira:customField:
    - key: qahours
      name: QA hours
      description: Log QA nonbillable hours in separated issue 
      type: number
      readOnly: false
      function: mainQAHoursField
      render: native
      edit:
        function: editQAHoursField
      validation:
        expression: value == null || (value >= 0)
        errorMessage: The value must be positive.
  function:
    - key: editQAHoursField
      handler: index.runEdit
    - key: mainQAHoursField
      handler: index.runView  
app:
  id: ari:cloud:ecosystem::app/27cadf05-5912-4267-b0d4-4e73c7014049
  runtime: 
     name: nodejs22.x
permissions:
  external:
    fetch:
      backend:
        - //urls
  scopes:
    - write:jira-work
    - read:jira-work
    - read:custom-field-contextual-configuration:jira

If I deploy this I get this error in Jira:

Something went wrong

Trace ID: 109d3ec244e947cdb65cccb4a6d79cba There was an error invoking the function - window is not defined

ReferenceError: window is not defined
at getCallBridge (webpack://jira-issue-panel-ui-kit/node_modules/@forge/bridge/out/bridge.js:… (truncated)

This is the qaHoursView.jsx file

import React, {  } from 'react';
import ForgeReconciler, {
  CustomField,
  Text,
  Fragment,
  useProductContext
} from '@forge/react';  
  
  export const View = () => {
    const {
      extensionContext: { fieldValue, fieldId },
    } = useProductContext();
  
    
    return (
      <CustomField>
        <Fragment>
          <Text>To log</Text>
        </Fragment>
      </CustomField>
    )
  };

And this is how the qaHoursEdit.jsx file starts:

import api from '@forge/api';
import {  } from '@forge/bridge';
import React, { useState, useEffect } from 'react';
import ForgeReconciler, { 
    CustomFieldEdit,
    Textfield, 
    Text,
    SectionMessage,
    useProductContext } from '@forge/react';

and this is the index.jsx:

import ForgeUI, {render} from "@forge/ui";

import {View} from "./components/qaHoursView";
import {Edit} from "./components/qaHoursEdit";


export const runView = render(<View/>);
export const runEdit = render(<Edit/>);
2

Hi @pthart,

It seems like you are trying to mix UI Kit 1 with latest UI Kit.

Have you followed our migration guide? https://developer.atlassian.com/platform/forge/ui-kit/upgrade-to-ui-kit-latest/

From the code you shared, the main problem seems to be that you are linking your module to a function (which is a UI Kit 1 concept), instead of a resource.

Also, in the index.jsx file you are importing from @forge/ui instead of @forge/react.

Your index file should look like something like this instead:

import ForgeUI from "@forge/react";

import {View} from "./components/qaHoursView";

ForgeUI.render(<View />);

Note that you will need to have two separate index files for the view and edit entrypoints respectively

Hope that helps!