# Cannot read properties of null (useContext)

**URL:** <https://community.hubspot.com/t/cannot-read-properties-of-null-usecontext/135966>\
**Category:** CMS Development\
**Tags:** javascript, enterprise\
**Created:** [July 10, 2025, 9:26am UTC](https://community.hubspot.com/t/cannot-read-properties-of-null-usecontext/135966 "2025-07-10T09:26:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jay\_pinetco](https://avatars.discourse-cdn.com/v4/letter/j/c4cdca/32.png) [@jay\_pinetco](https://community.hubspot.com/u/jay_pinetco)\
**Post date:** [July 10, 2025, 9:26am UTC](https://community.hubspot.com/t/cannot-read-properties-of-null-usecontext/135966/1 "2025-07-10T09:26:59Z")

</div>

Hey People,

I am using HubSpot CMS React and trying to use components from the UI Library ( You can consider PrimeReact, ANT Design, Material UI ) inside a HubSpot Island, but I get errors like: “Cannot read properties of null (useContext).” I think the issue is that some UI components need setup that isn’t available inside an island. How can I use a UI component library inside HubSpot CMS React, especially inside a HubSpot Island? Are there any best practices or things I should avoid?

---

<div class="post-metadata">

**Author:** ![BrandonWoodruff](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/brandonwoodruff/32/61045_2.png) [@BrandonWoodruff](https://community.hubspot.com/u/BrandonWoodruff)\
**Post date:** [July 10, 2025, 1:07pm UTC](https://community.hubspot.com/t/cannot-read-properties-of-null-usecontext/135966/2 "2025-07-10T13:07:28Z")

</div>

You’re absolutely right that using UI component libraries like PrimeReact, Ant Design, or Material UI _inside HubSpot Islands_ introduces challenges—especially around context providers, client-side hydration, and DOM assumptions.

HubSpot Islands in the CMS React framework are intentionally **isolated React environments** that are server-rendered and then hydrated on the client, which can interfere with component libraries that rely on React.createContext, global DOM references, or window-based setup during initialization.

### What’s Causing useContext(null) Errors?

Those errors typically mean a provider (like ThemeProvider, ConfigProvider, or CssBaseline) **isn’t wrapping your Island component** , or the provider initialization is breaking due to mismatched hydration. Some UI libraries need to read or write to the DOM immediately when the component is loaded—and that breaks in Islands unless carefully scoped.

### 

### Best Practices for Using Component Libraries in HubSpot Islands:

1. **Wrap Islands with Context Providers Manually**  
Set up a wrapper for your Island that initializes required providers:

import { ConfigProvider } from ‘antd’; const MyIsland = () =\> { return ( \<ConfigProvider theme={{}}\> \<MyComponent /\> \</ConfigProvider\> ); }; export default MyIsland;

Do this inside the React file you reference in the Island.

1. **Avoid SSR-Dependent Components**  
Some components like modals, tooltips, or theme managers depend on document.body or window. These won’t render correctly in SSR without extra steps. You can:

2. **Isolate Side Effects**  
Avoid running DOM-affecting scripts directly inside the render tree. Instead:

useEffect(() =\> { if (typeof window !== “undefined”) { // Safe DOM-related code here } }, []);

1. **Hydration Check**  
Some folks use a “hydration-ready” check before rendering complex libraries:

const [isClient, setIsClient] = useState(false); useEffect(() =\> setIsClient(true), []); return isClient ? \<YourComplexUI /\> : null;

1. **Consider Using Only Lightweight Components in Islands**  
Heavy UI frameworks can bloat page load times or break if they depend on global scope. If you just need buttons, inputs, or modals, consider using [HubSpot’s UI Components SDK](https://developers.hubspot.com/docs/reference/ui-components/overview) instead for built-in harmony.

### Things to Avoid

- Don’t mix React versions between your Island and library (HubSpot CMS React uses React 18).
- Avoid injecting external libraries globally into the page if you’re working within Islands—they won’t scope safely and may conflict with HubSpot’s runtime.

### Dev Sandbox Tip:

If you’re testing, spin up a HubSpot [developer sandbox](https://developers.hubspot.com/docs/cms/developer-reference/testing-sites) and try loading your components in isolation from a full page module vs. an Island. Some libraries will behave better outside of the Island scope.

* * *

Let me know if this helps, or if you have any other questions!

* * *

✔

Was I able to help answer your question? Help the community by **marking it as a solution.**

| ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/3/d314478a36473977ed45320812b9331d25e0d3c4.jpeg) | **[Brandon Woodruff](https://www.linkedin.com/in/brandon-woody-woodruff/)**  
Senior Software Developer @[Pearagon](https://www.pearagon.com/)Still have questions? Reach out to[brandon@pearagon.com](mailto:brandon@pearagon.com) ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/c/dcad77e6cf96145dd117147531ae4423b9b5cd91.png) |

* * *

---

<div class="post-metadata">

**Author:** ![jay\_pinetco](https://avatars.discourse-cdn.com/v4/letter/j/c4cdca/32.png) [@jay\_pinetco](https://community.hubspot.com/u/jay_pinetco)\
**Post date:** [July 14, 2025, 9:10am UTC](https://community.hubspot.com/t/cannot-read-properties-of-null-usecontext/135966/3 "2025-07-14T09:10:10Z")

</div>

Thanks so much, Brandon, for taking the time to respond to my question! I really appreciate it!