What causes "Context not initalized" in remotion-dev/remotion?

Ensure the component using subscribeToEvent is rendered inside the Studio context provider.

Context not initalized

Error message

Context not initalized

What it means

The Studio's shared context React context has a default value whose subscribeToEvent is a stub that throws. Any consumer calling subscribeToEvent before the real provider has mounted gets this error, signaling the context was never initialized.

Solutions

Ensure the component using subscribeToEvent is rendered inside the Studio context provider.
Defer subscription until after the provider/context is mounted (e.g. in useEffect after app init).
In tests, wrap the component in the required provider.
Guard usage with a check for the init state before subscribing.

Example fix

// before
const {subscribeToEvent} = useContext(StudioContext);
subscribeToEvent(handler);
// after
useEffect(() => {
  const {subscribeToEvent} = contextRef.current;
  return subscribeToEvent(handler);
}, []);

Defensive patterns

Strategy: validation

Validate before calling

if (!contextInitialized) throw new Error('Subscribe only after Studio provider mounts');

Type guard

const isReady = (ctx: {previewServerState: {type: string}}) => ctx.previewServerState.type !== 'init';

Try / catch

try {
  subscribeToEvent(handler);
} catch (err) {
  if (err.message.includes('Context not initalized')) {
    // defer until provider mounts, e.g. retry in useEffect
  }
}

Prevention

Only consume the context inside the provider tree
Subscribe in effects, not during render/module init
Wrap test renders in the required Studio provider

When it happens

Trigger: Calling subscribeToEvent on the context value before the provider wrapping the Studio app renders — e.g. a component consuming the context outside the provider, or event subscription attempted during initial 'init' state.

Common situations: Code hooks running before StudioClientProvider mounts; tests rendering a component without the provider; race between server event wiring and app bootstrap.

Understand the failure class

Background: "Invalid state transition" errors: "status must be X, actually Y", "already rejected/charging/uninstalled", "cannot ... while running" — what they mean when a library rejects your call — this error's family across 31 libraries.

Related errors

AI-assisted analysis of remotion-dev/remotion@46a3a6bf13 (2026-09-18). Data as JSON: /api/errors/d66c1ecabff80dd5. Report an issue: GitHub.

Appendix: source

Thrown at packages/studio/src/helpers/client-id.tsx:35

type Context = {
	previewServerState: PreviewServerConnectionState;
	configFileChangeRevision: number;
	restartRequired: boolean;
	subscribeToEvent: (
		type: EventSourceEvent['type'],
		listener: (event: EventSourceEvent) => void,
	) => () => void;
};

export const StudioServerConnectionCtx = React.createContext<Context>({
	previewServerState: {
		type: 'init',
	},
	configFileChangeRevision: 0,
	restartRequired: false,
	subscribeToEvent: () => {
		throw new Error('Context not initalized');
	},
});

type Listeners = {
	type: string;
	listener: (event: EventSourceEvent) => void;
}[];

export const PreviewServerConnection: React.FC<{
	readonly children: React.ReactNode;
}> = ({children}) => {
	const listeners = useRef<Listeners>([]);
	const latestUndoRedoEvent = useRef<
		Extract<EventSourceEvent, {type: 'undo-redo-stack-changed'}> | undefined
	>(undefined);

	const subscribeToEvent = useCallback(
		(

View on GitHub (pinned to 46a3a6bf13)