What causes "useLogLevel must be used within a LogLevelProvider" in remotion-dev/remotion?

Ensure the LogLevelProvider always supplies a concrete LogLevel (e.g. 'info') as its value.logLevel.

remotion-dev/remotion · error · Error

useLogLevel must be used within a LogLevelProvider

Error message

useLogLevel must be used within a LogLevelProvider

What it means

Thrown by the useLogLevel() hook when the LogLevelContext value has logLevel === null. Because the context default sets logLevel to 'info', this only fires when a LogLevelProvider is rendered with an explicitly null/incomplete value (or a custom provider that sets it to null) — it indicates the provider has not supplied a real log level rather than the hook being used outside any tree.

Source

Thrown at packages/core/src/log-level-context.tsx:18

import {createContext} from 'react';
import type {LogLevel} from './log';
import React = require('react');

export type LoggingContextValue = {
	logLevel: LogLevel | null;
	mountTime: number;
};

export const LogLevelContext = createContext<LoggingContextValue>({
	logLevel: 'info',
	mountTime: 0,
});

export const useLogLevel = (): LogLevel => {
	const {logLevel} = React.useContext(LogLevelContext);
	if (logLevel === null) {
		throw new Error('useLogLevel must be used within a LogLevelProvider');
	}

	return logLevel;
};

export const useMountTime = (): number => {
	const {mountTime} = React.useContext(LogLevelContext);
	if (mountTime === null) {
		throw new Error('useMountTime must be used within a LogLevelProvider');
	}

	return mountTime;
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Ensure the LogLevelProvider always supplies a concrete LogLevel (e.g. 'info') as its value.logLevel.
Default the provider's logLevel to 'info' while the real value is loading instead of null.
Use Remotion's built-in LogLevelProvider rather than a custom one.

Example fix

// before
<LogLevelContext.Provider value={{logLevel: null, mountTime: 0}}>
  <App/>
</LogLevelContext.Provider>
// after
<LogLevelContext.Provider value={{logLevel: 'info', mountTime: Date.now()}}>
  <App/>
</LogLevelContext.Provider>

Defensive patterns

Strategy: validation

Validate before calling

const logLevel = useLogLevelSafe();
// where useLogLevelSafe reads context and falls back to 'info' when null

Type guard

const isLogLevel = (v: unknown): v is string =>
  typeof v === 'string' && ['verbose', 'info', 'warn', 'error'].includes(v);

Prevention

Always supply a concrete logLevel in your LogLevelProvider value.
Default to 'info' while the real level loads instead of null.
Prefer Remotion's built-in LogLevelProvider over a custom one.

When it happens

Trigger: Rendering a LogLevelProvider whose value prop carries logLevel: null; a provider that forwards an uninitialized logLevel; using the hook under a custom provider that resets logLevel to null during initialization.

Common situations: Wiring a custom provider that reads log level from async config and sets null until loaded; resetting context state to null on logout/reset; partial context objects passed to the provider.

Related errors

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/2e7f14c4e6ba921c. Report an issue: GitHub.