Skip to main content
The no-invalid-extension-point-imports rule prevents importing components and utilities from unsupported extension points.

​
Rule details

UI extensions are organized into separate extension points based on their location in HubSpot (e.g., crm.record.tab, home), each with its own runtime environment. Components and utilities designed for one extension point cannot be imported in another extension point. This rule detects when you try to import from a different extension point than the one your code is running in. It determines your current extension point based on the project’s directory structure:
  • Code in extensions/ or cards/ directories is in the CRM extension point.
  • Code in settings/ directory is in the Settings extension point.
  • Code in pages/ directory is in the Pages extension point.
You can always import from paths that are agnostic of extension point, such as @hubspot/ui-extensions:

​
Examples

The following example would result in a linting error due to importing from the CRM extension point while in the Settings extension point: 
// In: src/app/settings/SettingsExtension.tsx
import { useCrmProperties } from '@hubspot/ui-extensions/crm/hooks';

function MyExtension() {
  const { properties } = useCrmProperties(['firstname']);
}
Instead, always import from the same extension point you’re working in: 
// In: src/app/extensions/MyExtension.tsx
import { useAssociations } from '@hubspot/ui-extensions/crm/hooks';

function MyExtension() {
  const { results } = useAssociations();
}
In any extension point, you can import from paths that don’t correlate with a specific extension point, such as @hubspot/ui-extensions: 
// In any extension point
import { useState } from 'react';
import { hubspot, logger } from '@hubspot/ui-extensions';
import { Text, Button, Box } from '@hubspot/ui-extensions';
Last modified on February 19, 2026