twentyhq/twenty · error · Error

unmountFrontComponentFunction is not set

Error message

unmountFrontComponentFunction is not set

What it means

Thrown by unmountFrontComponent when the host application has not registered an unmountFrontComponent function on the global frontComponentHostCommunicationApi. This function is the mechanism by which a front component asks the Twenty host shell to unmount/remove it. If called outside the host context, the function is undefined.

Source

Thrown at packages/twenty-sdk/src/sdk/front-component/functions/unmountFrontComponent.ts:13

import { isDefined } from 'twenty-shared/utils';

import {
  frontComponentHostCommunicationApi,
  type UnmountFrontComponentFunction,
} from '../globals/frontComponentHostCommunicationApi';

export const unmountFrontComponent: UnmountFrontComponentFunction = () => {
  const unmountFrontComponentFunction =
    frontComponentHostCommunicationApi.unmountFrontComponent;

  if (!isDefined(unmountFrontComponentFunction)) {
    throw new Error('unmountFrontComponentFunction is not set');
  }

  return unmountFrontComponentFunction();
};

View on GitHub (pinned to 1f5dd2bbd2)

Solutions

1. Only call unmountFrontComponent from within a component lifecycle (e.g. button click handler) that is running inside the Twenty host shell.
2. In tests, mock the global: (globalThis as any).frontComponentHostCommunicationApi = { unmountFrontComponent: jest.fn().mockResolvedValue(undefined) }.
3. Verify the host app sets frontComponentHostCommunicationApi.unmountFrontComponent before mounting front components.
4. Guard the call with an isDefined check on the function before invoking.

import { frontComponentHostCommunicationApi } from 'twenty-sdk';
import { isDefined } from 'twenty-shared/utils';

const canUnmount = (): boolean => {
  return isDefined(frontComponentHostCommunicationApi.unmountFrontComponent);
};

if (!canUnmount()) {
  console.warn('unmountFrontComponent unavailable — not in host context.');
  return;
}

import { isDefined } from 'twenty-shared/utils';
import { frontComponentHostCommunicationApi } from 'twenty-sdk';

const isUnmountAvailable = (): boolean => {
  return isDefined(frontComponentHostCommunicationApi.unmountFrontComponent);
};

try {
  await unmountFrontComponent();
} catch (error) {
  if (error instanceof Error && error.message === 'unmountFrontComponentFunction is not set') {
    console.warn('Unmount not available outside host context.');
    return;
  }
  throw error;
}

When it happens

Trigger: Calling unmountFrontComponent() before the host has set frontComponentHostCommunicationApi.unmountFrontComponent. Occurs in non-host environments (standalone, test, SSR), when host bridge initialization failed, or when called prematurely before host mounting completes.

Common situations: Unit testing a component that calls unmountFrontComponent without mocking the global API. Running a front component in Storybook or a standalone preview. The host shell's bridge was not initialized due to a configuration error. Calling unmount during an error boundary's render phase before the host has set up the bridge.

Related errors

• openSidePanelPageFunction is not set
• updateProgressFunction is not set
• createCompany did not return an id
• createPerson did not return an id
• createOpportunity did not return an id

AI-assisted analysis of twentyhq/twenty@1f5dd2bbd2 (2026-08-12). Data as JSON: /api/errors/f2f0000dec01099d. Report an issue: GitHub.