remotion-dev/remotion · error · Error

Called useVideoConfig() outside a Remotion composition.

Error message

Called useVideoConfig() outside a Remotion composition.

What it means

Final useVideoConfig guard: a config was found but the CanUseRemotionHooks context is false, so the hook refuses to return it. This indicates the component receives config (e.g. via a shared module or default value) but is not actually inside the Remotion hook-enabled tree — a state that should not happen in normal usage and usually points to provider misconfiguration or version skew.

Source

Thrown at packages/core/src/use-video-config.ts:36

			(typeof window !== 'undefined' && window.remotion_isPlayer) ||
			isPlayer
		) {
			throw new Error(
				[
					'No video config found. Likely reasons:',
					'- You are probably calling useVideoConfig() from outside the component passed to <Player />. See https://www.remotion.dev/docs/player/examples for how to set up the Player correctly.',
					'- You have multiple versions of Remotion installed which causes the React context to get lost.',
				].join('-'),
			);
		}

		throw new Error(
			'No video config found. You are probably calling useVideoConfig() from a component which has not been registered as a <Composition />. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions for more information.',
		);
	}

	if (!context) {
		throw new Error('Called useVideoConfig() outside a Remotion composition.');
	}

	return videoConfig;
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Render the component inside the full Remotion provider tree (use the test helpers or <RemotionRoot>).
2. Deduplicate Remotion versions so config and CanUseRemotionHooks come from the same copy.
3. In tests, supply both contexts (config + CanUseRemotionHooks=true) or use the provided test wrappers.
4. Avoid mocking individual Remotion contexts; prefer rendering a real <Composition>/<Player>.

Example fix

// before (test)
const {result} = renderHook(() => useVideoConfig(), {
  wrapper: ({children}) => <ConfigContext.Provider value={cfg}>{children}</ConfigContext.Provider>,
});

// after — use the Remotion test wrapper that sets both contexts
const {result} = renderHook(() => useVideoConfig(), {
  wrapper: RemotionWrapper, // provides config + CanUseRemotionHooks
});

// In tests, use the Remotion-provided wrappers that set BOTH config and CanUseRemotionHooks.
// Avoid partial mocking of contexts.

When it happens

Trigger: A config context value leaks to a component that is not under the Remotion providers; multiple Remotion copies where one supplies config and another owns the CanUseRemotionHooks flag; manually mocking the config context in tests without also enabling CanUseRemotionHooks.

Common situations: Monorepo duplicate @remotion/core; test harnesses that partially mock contexts; provider trees where CanUseRemotionHooks.Provider was omitted but config was supplied; SSR setups that set a default config.

Related errors

• No video config found. Likely reasons:- You are probably cal
• useMediaPlayback must be used inside a <BufferingContext>
• No video config found. You are probably calling useVideoConf
• Tried to enable the buffering state, but a Remotion context
• useCurrentScale() was called outside of a Remotion context.

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