{"record":{"id":"8db90322de67024b","repo":"remotion-dev/remotion","slug":"called-usevideoconfig-outside-a-remotion-composi","errorCode":null,"errorMessage":"Called useVideoConfig() outside a Remotion composition.","messagePattern":"Called useVideoConfig\\(\\) outside a Remotion composition\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/use-video-config.ts","lineNumber":36,"sourceCode":"\t\t\t(typeof window !== 'undefined' && window.remotion_isPlayer) ||\n\t\t\tisPlayer\n\t\t) {\n\t\t\tthrow new Error(\n\t\t\t\t[\n\t\t\t\t\t'No video config found. Likely reasons:',\n\t\t\t\t\t'- 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.',\n\t\t\t\t\t'- You have multiple versions of Remotion installed which causes the React context to get lost.',\n\t\t\t\t].join('-'),\n\t\t\t);\n\t\t}\n\n\t\tthrow new Error(\n\t\t\t'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.',\n\t\t);\n\t}\n\n\tif (!context) {\n\t\tthrow new Error('Called useVideoConfig() outside a Remotion composition.');\n\t}\n\n\treturn videoConfig;\n};\n","sourceCodeStart":18,"sourceCodeEnd":41,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/use-video-config.ts#L18-L41","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Render the component inside the full Remotion provider tree (use the test helpers or <RemotionRoot>).","Deduplicate Remotion versions so config and CanUseRemotionHooks come from the same copy.","In tests, supply both contexts (config + CanUseRemotionHooks=true) or use the provided test wrappers.","Avoid mocking individual Remotion contexts; prefer rendering a real <Composition>/<Player>."],"exampleFix":"// before (test)\nconst {result} = renderHook(() => useVideoConfig(), {\n  wrapper: ({children}) => <ConfigContext.Provider value={cfg}>{children}</ConfigContext.Provider>,\n});\n\n// after — use the Remotion test wrapper that sets both contexts\nconst {result} = renderHook(() => useVideoConfig(), {\n  wrapper: RemotionWrapper, // provides config + CanUseRemotionHooks\n});","handlingStrategy":"validation","validationCode":"// In tests, use the Remotion-provided wrappers that set BOTH config and CanUseRemotionHooks.\n// Avoid partial mocking of contexts.","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Use the official Remotion test wrappers rather than hand-rolling context providers.","Keep a single Remotion version so config and hook-permission flags share identity.","Do not mock CanUseRemotionHooks independently of the config context."],"tags":["remotion","use-video-config","context","version-mismatch","testing"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}