UI Kit latest can't run backend functions?

Forge
1

I have an app with a configuration page, pretty simple, just a form with two buttons, one to create a project with schema, status and more and another button to remove all.

I have been working on updating to UI Kit latest but I’m unable to have the same behaviour as before since my buttons don’t work anymore. Reading online I found that I should use invoke now to handle async functions in the UI but I haven’t had any luck with this, I started getting this error:

There was an error invoking the function - window is not defined

My understanding is that I need to use invoke as the documentation says but I can not do it.

Is there something I’m missing?, is there any other way to handle async functionality in a form?

2

Hi @Leonardo,

That error makes me suspect that you’re importing a client-side library in your backend Forge function. The Forge function runtime is Node.js-based, whereas window is an object that will only be available in a browser JS context.

Can you check your imports and make sure you’re importing the appropriate libraries in your function?

If you use the Forge CLI to generate a new UI Kit project with a config page you can see the appropriate imports and pattern match in your own app. Otherwise feel free to share your code here and we can advise.

cheers,
Tim

3

Hi!, Thank you for the fast response.

I just created a new project with forge and is using the same imports:

  • Invoke from @forge/bridge
  • ForgeReconciler from @forge/react
  • UI components from react

What I do see different is the way is using the invoke, inside a useEffect, I’m currently not doing this.

Here is the submit function that I’m currently using on my form:

  const OnSubmit = async (formData) => {
    setIsSubmissionError(false);
    try {
      const key = formData.projectKey.toUpperCase();
      console.info(`Here with ${JSON.stringify(formData)}`);
      const keyInUse = await invoke('getProjectId');
      console.info(`Here after invoke`);
      if (keyInUse) {
        // Some handling
        return;
      }
      const setupStatus = await invoke('setupProject', { token: formData.token, onlyEscalated: formData.only_escalated, projectKey: key });
      if (setupStatus.success) {
         setFormMessage({}); // Just to share less code
      } else {
        setFormMessage({});
      }
    } catch (error) {
      console.error(`error here: ${JSON.stringify(error)}`);
      setIsSubmissionError(true);
      throw new Error(error);
    }
  };

I’m able to get the first “here” log, but then the error logs writes to the console, with error={}, after that the throw gets called and there says that I don’t have the window object

4

Found the issue, inside all my methods there was a client-side call. Thank you for the help!