{"record":{"id":"dbe9dbf6e2753d61","repo":"emotion-js/emotion","slug":"themeprovider-please-return-an-object-from-your","errorCode":null,"errorMessage":"[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!","messagePattern":"\\[ThemeProvider\\] Please return an object from your theme function, i\\.e\\. theme=(.+?)\\)\\}!","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react/src/theming.tsx","lineNumber":42,"sourceCode":"if (isDevelopment) {\n  ThemeContext.displayName = 'EmotionThemeContext'\n}\n\nexport const useTheme = () => React.useContext(ThemeContext)\n\nconst getTheme = (\n  outerTheme: Theme,\n  theme: Partial<Theme> | ((theme: Theme) => Theme)\n): Theme => {\n  if (typeof theme === 'function') {\n    const mergedTheme = theme(outerTheme)\n    if (\n      isDevelopment &&\n      (mergedTheme == null ||\n        typeof mergedTheme !== 'object' ||\n        Array.isArray(mergedTheme))\n    ) {\n      throw new Error(\n        '[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!'\n      )\n    }\n    return mergedTheme\n  }\n  if (\n    isDevelopment &&\n    (theme == null || typeof theme !== 'object' || Array.isArray(theme))\n  ) {\n    throw new Error(\n      '[ThemeProvider] Please make your theme prop a plain object'\n    )\n  }\n\n  return { ...outerTheme, ...theme }\n}\n\nlet createCacheWithTheme = /* #__PURE__ */ weakMemoize((outerTheme: Theme) => {","sourceCodeStart":24,"sourceCodeEnd":60,"githubUrl":"https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/react/src/theming.tsx#L24-L60","documentation":"@emotion/react's ThemeProvider getTheme() validates that the resolved theme is a non-null, non-array object. When the theme prop is a function, the function's return value (mergedTheme) is checked; if the function returns null, undefined, a primitive, or an array, this error is thrown in development. It exists because downstream emotion code destructures and spreads the theme and would otherwise fail with confusing errors.","triggerScenarios":"Passing theme={fn} to <ThemeProvider> where fn returns null, undefined, a primitive (string/number), or an array; e.g. theme={() => null} or a factory that conditionally returns nothing. Only thrown when isDevelopment.","commonSituations":"Theme factory functions that early-return null when config isn't loaded yet; refactored theme objects accidentally turned into arrays; async data that hasn't resolved so the factory returns undefined.","solutions":["Make the theme function always return a plain object, e.g. theme={() => ({ ...myTheme })}","Guard inside the function: return loadedTheme ?? {} instead of null/undefined","If the theme is a static object, pass it directly (theme={myTheme}) rather than wrapping it in a function that may return non-objects","Ensure the return value is not an array; spread arrays into an object or restructure the theme"],"exampleFix":"// before\n<ThemeProvider theme={() => config?.theme ?? null}>\n// after\n<ThemeProvider theme={() => config?.theme ?? {}}>","handlingStrategy":"validation","validationCode":"const resolved = typeof themeFn === 'function' ? themeFn(outerTheme) : themeFn\nif (resolved == null || typeof resolved !== 'object' || Array.isArray(resolved)) {\n  throw new TypeError('theme function must return a plain object')\n}","typeGuard":"function isPlainTheme(t: unknown): t is Record<string, unknown> {\n  return t != null && typeof t === 'object' && !Array.isArray(t)\n}","tryCatchPattern":"try {\n  render(<ThemeProvider theme={makeTheme}>{children}</ThemeProvider>)\n} catch (e) {\n  if (e.message.includes('[ThemeProvider]')) {\n    console.error('theme function returned a non-object; falling back to {}')\n    render(<ThemeProvider theme={{}}>{children}</ThemeProvider>)\n  } else throw e\n}","preventionTips":["Type theme factories with a non-nullable object return type: () => Theme","Never early-return null/undefined from theme functions; use ?? {}","Add a unit test asserting the theme factory returns an object for all states"],"tags":["react","theming","typeerror","development-only"],"backgroundTag":"invalid-prop-type","analyzedSha":"b882bcba85132554992e4bd49e94c95939bbf810","analyzedAt":"2026-09-02T22:27:13.739Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}