Loading...
Loading...
Error: useContext must be used within a <ThemeProvider>React Context requires that any component using useContext() must be a descendant of the corresponding Provider component. If the component is rendered outside the Provider tree, the context value is undefined and this error is thrown.
Ensure the Provider wraps all components that need the context.
// app/layout.tsx
import { ThemeProvider } from '@/context/ThemeContext';
export default function RootLayout({ children }) {
return (
<html>
<body>
<ThemeProvider> {/* ✅ Wraps everything */}
{children}
</ThemeProvider>
</body>
</html>
);
}Add a check in your custom hook to give a clear error message.
export function useTheme() {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
}