React.createContext() requires a default value argument, but was called with no parameters. This TypeScript error occurs when createContext is invoked without providing the required defaultValue parameter.
This error occurs when you call React.createContext() without providing the required default value parameter. The createContext function expects exactly one argument: a default value that will be used when a component tries to consume the context but there is no matching Provider in the component tree above it. In TypeScript projects, this manifests as a compile-time error "TS2554: Expected 1 arguments, but got 0." In JavaScript projects, while it may not immediately fail, omitting the default value parameter goes against React's API contract and can lead to unexpected behavior. The default value serves as a fallback and is only used when React can't find a matching context provider in the tree above the component that reads the context. Even if you plan to always wrap your context consumers with a Provider, React's API requires you to provide this parameter explicitly.
The simplest fix is to provide a default value that matches your context's type. If you don't have a meaningful default, pass null or undefined:
// Before (causes error)
const MyContext = React.createContext();
// After (fixed - using null)
const MyContext = React.createContext(null);
// Or with a meaningful default
const ThemeContext = React.createContext('light');
// Or for complex types
const UserContext = React.createContext({
name: 'Guest',
isLoggedIn: false
});This immediately resolves the TypeScript error and satisfies React's API requirements.
If you don't have a meaningful default value and want to use null, update your type definition to allow for null:
interface UserContextType {
username: string;
email: string;
}
// Create context with null and union type
const UserContext = createContext<UserContextType | null>(null);This approach is type-safe and makes it clear that the context value might be null when no provider is present.
For contexts that should always be provided, create a custom hook that throws a helpful error if used outside a provider:
interface AuthContextType {
user: { id: string; name: string } | null;
login: (credentials: any) => Promise<void>;
logout: () => void;
}
const AuthContext = createContext<AuthContextType | null>(null);
// Custom hook with validation
export function useAuth() {
const context = useContext(AuthContext);
if (!context) {
throw new Error(
'useAuth must be used within an AuthProvider. ' +
'Wrap your component with <AuthProvider>.'
);
}
return context;
}
// Usage
function MyComponent() {
const { user, login, logout } = useAuth(); // Type-safe, no null checks needed
// ...
}This pattern provides both type safety and helpful runtime errors during development.
If you're certain the context will always be provided in your app, you can use TypeScript's non-null assertion operator:
interface SidebarContextType {
isOpen: boolean;
toggle: () => void;
}
// Using undefined! tells TypeScript the value won't be undefined at runtime
const SidebarContext = createContext<SidebarContextType>(undefined!);Warning: This approach bypasses TypeScript's safety checks. Only use it when you're absolutely certain every consumer will be wrapped in a provider. The custom hook approach from Step 3 is generally safer.
Why React requires a default value:
React's context system needs a default value for two reasons:
1. Type inference: The default value helps TypeScript infer the context's type
2. Fallback behavior: If a component uses useContext() outside a Provider, it receives this default value instead of crashing
Best practices for default values:
- For optional contexts: Use null or undefined and handle accordingly in consumers
- For required contexts: Use the custom hook pattern with runtime validation
- For development: Consider using a Symbol or unique object as the default to detect improper usage:
const REQUIRED_CONTEXT = Symbol('REQUIRED_CONTEXT');
const MyContext = createContext<MyType | typeof REQUIRED_CONTEXT>(REQUIRED_CONTEXT);
function useMyContext() {
const value = useContext(MyContext);
if (value === REQUIRED_CONTEXT) {
throw new Error('MyContext must be provided');
}
return value;
}React 18+ considerations:
In React 18 and newer versions, the requirement for a default value remains unchanged. Even with concurrent features and automatic batching, createContext() still expects exactly one argument.
Performance note:
The default value is only used when no Provider is found. Once wrapped in a Provider, React uses the provided value, so the default value's complexity doesn't impact runtime performance.
React.FC expects children prop to be defined
React.FC no longer includes implicit children prop
Warning: You provided a `selected` prop to a form field without an `onChange` handler
You provided a 'selected' prop without an onChange handler
Failed to load source map from suspense chunk
How to fix "Failed to load source map from suspense chunk" in React
Prop spreading could cause security issues
Prop spreading could cause security issues
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency