Cannot read properties of null (useContext)

jay_pinetco — Thu, 10 Jul 2025 09:26:59 GMT

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?

Re: Cannot read properties of null (useContext)

BrandonWoodruff — Thu, 10 Jul 2025 13:07:28 GMT

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:

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.
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:
- Use useEffect to delay rendering
- Use dynamic imports (e.g. next/dynamic style)
- Wrap in conditional hydration guards
Isolate Side Effects
Avoid running DOM-affecting scripts directly inside the render tree. Instead:

useEffect(() => { if (typeof window !== "undefined") { // Safe DOM-related code here } }, []);
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;
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 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 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.

Brandon Woodruff
Senior Software Developer @ Pearagon

Still have questions? Reach out to brandon@pearagon.com

Re: Cannot read properties of null (useContext)

jay_pinetco — Mon, 14 Jul 2025 09:10:10 GMT

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

topic Re: Cannot read properties of null (useContext) in CMS Development

Cannot read properties of null (useContext)

Re: Cannot read properties of null (useContext)

What’s Causing useContext(null) Errors?

Best Practices for Using Component Libraries in HubSpot Islands:

Things to Avoid

Dev Sandbox Tip:

Re: Cannot read properties of null (useContext)