twentyhq/twenty · error · Error

openSidePanelPageFunction is not set

Error message

openSidePanelPageFunction is not set

What it means

Thrown by openSidePanelPage when the host application has not registered an openSidePanelPage function on the global frontComponentHostCommunicationApi. This global store is populated by the Twenty host app (the CRM shell) when it mounts a front component. If the SDK function is called outside the host context (e.g. in isolation, in a unit test, or before the host initializes the bridge), the function is undefined.

Source

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

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

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

export const openSidePanelPage: OpenSidePanelPageFunction = (params) => {
  const openSidePanelPageFunction =
    frontComponentHostCommunicationApi.openSidePanelPage;

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

  return openSidePanelPageFunction(params);
};

View on GitHub (pinned to 1f5dd2bbd2)

Solutions

  1. Ensure openSidePanelPage is only called within a component mounted by the Twenty host shell, not during module load.
  2. In tests, mock the global: (globalThis as any).frontComponentHostCommunicationApi = { openSidePanelPage: jest.fn() }.
  3. Verify the host app correctly populates frontComponentHostCommunicationApi.openSidePanelPage before rendering front components.
  4. Guard the call: check if frontComponentHostCommunicationApi.openSidePanelPage is defined before calling.

Example fix

// before — calling without host context
import { openSidePanelPage } from 'twenty-sdk';
openSidePanelPage({ page: 'ViewRecord', recordId: '123', objectNameSingular: 'company' });

// after — guard or mock
const { frontComponentHostCommunicationApi } = require('twenty-sdk');
if (!frontComponentHostCommunicationApi.openSidePanelPage) {
  console.warn('openSidePanelPage not available outside host context');
  return;
}
openSidePanelPage({ page: 'ViewRecord', recordId: '123', objectNameSingular: 'company' });
Defensive patterns

Strategy: type-guard

Validate before calling

import { frontComponentHostCommunicationApi } from 'twenty-sdk';

const canOpenSidePanel = (): boolean => {
  return frontComponentHostCommunicationApi.openSidePanelPage !== undefined;
};

if (!canOpenSidePanel()) {
  console.warn('openSidePanelPage unavailable — not running inside Twenty host.');
  return;
}

Type guard

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

const isOpenSidePanelAvailable = (): boolean => {
  return isDefined(frontComponentHostCommunicationApi.openSidePanelPage);
};

Try / catch

try {
  await openSidePanelPage(params);
} catch (error) {
  if (error instanceof Error && error.message === 'openSidePanelPageFunction is not set') {
    console.warn('Side panel navigation not available outside host context.');
    return;
  }
  throw error;
}

Prevention

When it happens

Trigger: Calling openSidePanelPage(params) before the host has set frontComponentHostCommunicationApi.openSidePanelPage. This happens when: the front component SDK runs in a non-host environment (standalone, test, SSR), the host bridge initialization failed silently, or the function is called during module evaluation before the host has mounted the component.

Common situations: Unit testing a front component that calls openSidePanelPage without mocking the global API. Running the front component in a Storybook or playground without the Twenty host shell. The host app's bridge setup code has a bug or race condition that leaves the function unset. SSR or build-time evaluation that inadvertently executes the function.

Related errors


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