{"record":{"id":"06fef8e820f0c0ae","repo":"mantinedev/mantine","slug":"emotion-cache-is-not-available-in-context-make-su","errorCode":null,"errorMessage":"Emotion cache is not available in context, make sure that you have MantineEmotionProvider in the component tree","messagePattern":"Emotion cache is not available in context, make sure that you have MantineEmotionProvider in the component tree","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@mantine/emotion/src/MantineEmotionProvider.tsx","lineNumber":10,"sourceCode":"import { createContext, use } from 'react';\nimport { EmotionCache, withEmotionCache } from '@emotion/react';\n\nexport const EmotionCacheContext = createContext<EmotionCache | null>(null);\n\nexport function useEmotionCache() {\n  const cache = use(EmotionCacheContext);\n\n  if (cache === null) {\n    throw new Error(\n      'Emotion cache is not available in context, make sure that you have MantineEmotionProvider in the component tree'\n    );\n  }\n\n  return cache;\n}\n\ninterface EmotionCacheProviderProps {\n  children: React.ReactNode;\n  cache?: EmotionCache;\n}\n\nexport const MantineEmotionProvider = withEmotionCache<EmotionCacheProviderProps>(\n  ({ children, cache }, ctx) => (\n    <EmotionCacheContext value={cache || ctx}>{children}</EmotionCacheContext>\n  )\n);\n","sourceCodeStart":1,"sourceCodeEnd":28,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/emotion/src/MantineEmotionProvider.tsx#L1-L28","documentation":"@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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Add <MantineEmotionProvider cache={getCache()}> inside MantineProvider","Import getCache from @mantine/emotion/server for SSR entry points","Ensure any secondary roots/portals are also wrapped"],"exampleFix":"// before\n<MantineProvider>{children}</MantineProvider>\n\n// after\nimport { MantineEmotionProvider } from '@mantine/emotion';\nimport { getCache } from '@mantine/emotion/server';\n\n<MantineProvider>\n  <MantineEmotionProvider cache={getCache()}>{children}</MantineEmotionProvider>\n</MantineProvider>","handlingStrategy":"validation","validationCode":"// Wrap app: <MantineEmotionProvider cache={getCache()}> inside MantineProvider","typeGuard":"null","tryCatchPattern":null,"preventionTips":["Always pair MantineProvider with MantineEmotionProvider when using @mantine/emotion","Use getCache from @mantine/emotion/server for SSR","Re-wrap secondary roots and portals"],"tags":["mantine","emotion","css-in-js","provider","context"],"backgroundTag":"missing-context-provider","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}