Cannot read properties of null (useContext)

Develop, Build & Integrate CMS Development
,
1

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?

2

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:

    • Use useEffect to delay rendering
    • Use dynamic imports (e.g. next/dynamic style)
    • Wrap in conditional hydration guards

  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 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!

:check_mark:

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

200×200 7.52 KB
Brandon Woodruff
Senior Software Developer @ PearagonStill have questions? Reach out tobrandon@pearagon.com
3

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