Need Help Resolving "window is not defined" Error in Forge App Deployment

Forge
,
1

Hello Atlassian Developer Community,

I am currently developing a Forge app that exports issues from Jira to Word and PDF formats. However, I’ve encountered a persistent issue during deployment that I’ve been unable to resolve. The error message I’m receiving is:

`>Snapshot error occurred: Error: window is not defined

his error appears during the snapshotting functions stage of the deployment process. The specific error log points to /var/task/index.js:36764:27, which I understand is part of the Forge runtime environment and not directly accessible.

App Details:

  • The app is designed to add an “Export to Word” action to Jira issues.
  • The frontend is built with Forge UI and the backend function handles the export logic.
  • The frontend uses @forge/ui and @forge/bridge for UI components and communication between frontend and backend.
  • The backend function (exportIssueToWord) fetches issue details using @forge/api and is supposed to send data to an external service for document generation (currently this part is not fully implemented).

Attempts to Resolve:

  • Checked the code for any direct references to window or browser-specific objects (none found).
  • Reviewed all third-party libraries for compatibility with Forge’s server-side environment.
  • Tried simplifying the code to isolate the problem.
  • Consulted Forge documentation for insights on snapshot context and runtime constraints.
  • Reinstalled npm dependencies and checked the build process for any misconfiguration.

I’m including the core parts of my code below for reference:

index.jsx:

import ForgeUI, { render, Text, IssueAction, ModalDialog, Button, useState, useEffect, useProductContext } from '@forge/ui';
import api from '@forge/api';
import { invoke } from '@forge/bridge';

const App = () => {
  const [isOpen, setOpen] = useState(true);
  const [issueData, setIssueData] = useState(null);
  const [exporting, setExporting] = useState(false);

  // Use the useProductContext hook to access the current issue's context
  const context = useProductContext();
  const issueId = context.platformContext.issueKey;

  // Function to handle the export action
  const handleExport = async () => {
    setExporting(true);

    try {
      const result = await invoke('export-issue-function', { issueId });
      // Handle the result, e.g., show download link
      console.log(result);
    } catch (error) {
      console.error('Error exporting issue:', error);
    }

    setExporting(false);
  };

  // Fetch issue data (as an example)
  useEffect(() => {
    const fetchData = async () => {
      const response = await api.fetch(`/rest/api/3/issue/${issueId}`);
      const data = await response.json();
      setIssueData(data);
    };
  
    fetchData();
  }, [issueId]);
  

  if (!isOpen) {
    return null;
  }

  return (
    <ModalDialog header="Export Issue to Word" onClose={() => setOpen(false)}>
      <Text>{issueData ? `Exporting: ${issueData.key}` : "Loading issue..."}</Text>
      <Button text="Export" onClick={handleExport} isLoading={exporting} />
    </ModalDialog>
  );
};

export const run = render(
  <IssueAction>
    <App />
  </IssueAction>
);

exportIssue.js:

> // exportIssue.js
> import api from '@forge/api';
> 
> export const exportIssueToWord = async (issueId) => {
>   // Fetch issue details
>   const response = await api.asApp().requestJira(`/rest/api/3/issue/${issueId}`);
>   const issueData = await response.json();
> 
>   // Prepare data for external service
>   // ...
> 
>   // Send data to external service and get the Word document
>   // ...
> 
>   // Return the download link or the file
>   return {
>     downloadLink: 'link-to-word-document',
>     // or
>     fileData: 'base64-or-binary-data-of-file'
>   };
> };

I would greatly appreciate any guidance, suggestions, or insights from the community. If anyone has encountered a similar issue or knows potential causes, please share your thoughts.

Thank you in advance for your help!

2

Hey @OdayRafeh, thanks for reaching out to us and for the detailed post.

I think it is a result of the type of Forge app you are building. It seems that you have mixed usage of UI Kit and CustomUI which I believe will cause the issues you are experiencing. It is important to note that these are indeed different types of apps and app development and are distinct from each other. You can read a little bit more here.

For example, removing usage of the invoke, which is a CustomUI intended feature, should resolve the issue.

I hope that this helps and let me know if you have any further questions!
Matthew

1 Like
3

Thanks @MatthewFreeman for the help , that worked :slight_smile:

1 Like