> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: b9e6533d-3bbc-45f1-95a0-17304a9807f7
---

# no-invalid-extension-point-imports

> Prevent importing components from unsupported extension points.

The `no-invalid-extension-point-imports` rule prevents importing components and utilities from unsupported [extension points](/apps/developer-platform/add-features/ui-extensions/overview#supported-locations).

## 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:

```tsx theme={null}
// 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:

```tsx theme={null}
// 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`:

```tsx theme={null}
// In any extension point
import { useState } from 'react';
import { hubspot, logger } from '@hubspot/ui-extensions';
import { Text, Button, Box } from '@hubspot/ui-extensions';

```

## Related resources

* [UI extensions SDK overview](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk)
* [Extension point locations](/apps/developer-platform/add-features/ui-extensions/overview#supported-locations)