mantinedev/mantine · error · Error

Emotion cache is not available in context, make sure that yo

Error message

Emotion cache is not available in context, make sure that you have MantineEmotionProvider in the component tree

What it means

@mantine/emotion's useEmotionCache reads EmotionCacheContext, which is populated only by MantineEmotionProvider. A null cache means CSS-in-JS styles cannot be inserted at runtime, so the hook throws to fail fast instead of silently dropping styles.

Source

Thrown at packages/@mantine/emotion/src/MantineEmotionProvider.tsx:10

import { createContext, use } from 'react';
import { EmotionCache, withEmotionCache } from '@emotion/react';

export const EmotionCacheContext = createContext<EmotionCache | null>(null);

export function useEmotionCache() {
  const cache = use(EmotionCacheContext);

  if (cache === null) {
    throw new Error(
      'Emotion cache is not available in context, make sure that you have MantineEmotionProvider in the component tree'
    );
  }

  return cache;
}

interface EmotionCacheProviderProps {
  children: React.ReactNode;
  cache?: EmotionCache;
}

export const MantineEmotionProvider = withEmotionCache<EmotionCacheProviderProps>(
  ({ children, cache }, ctx) => (
    <EmotionCacheContext value={cache || ctx}>{children}</EmotionCacheContext>
  )
);

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Add <MantineEmotionProvider cache={getCache()}> inside MantineProvider
2. Import getCache from @mantine/emotion/server for SSR entry points
3. Ensure any secondary roots/portals are also wrapped

Example fix

// before
<MantineProvider>{children}</MantineProvider>

// after
import { MantineEmotionProvider } from '@mantine/emotion';
import { getCache } from '@mantine/emotion/server';

<MantineProvider>
  <MantineEmotionProvider cache={getCache()}>{children}</MantineEmotionProvider>
</MantineProvider>

// Wrap app: <MantineEmotionProvider cache={getCache()}> inside MantineProvider

null

When it happens

Trigger: Using @mantine/emotion APIs (or components that inject styles via Emotion) without wrapping the app in MantineEmotionProvider, or rendering emotion-dependent components in a separate root/portal outside the provider.

Common situations: SSR setups with @mantine/emotion where MantineEmotionProvider with getCache() was omitted, upgrading/removing the provider during migration to PostCSS/pandas styling, or tests rendering styled components in isolation.

Related errors

• @mantine/core: MantineProvider was not found in component tr
• [@mantine/modals] useModals hook was called outside of conte
• ${errorMessage}
• useFormContext was called outside of FormProvider context
• [@mantine/core] MantineProvider was not found in tree

AI-assisted analysis of mantinedev/mantine@8a284e2c2c (2026-08-28). Data as JSON: /api/errors/06fef8e820f0c0ae. Report an issue: GitHub.