{"record":{"id":"35b7eed9b0e92eb4","repo":"remotion-dev/remotion","slug":"remotion-requires-react-createcontext-but-it-is","errorCode":null,"errorMessage":"Remotion requires React.createContext, but it is \"undefined\".\nIf you are in a React Server Component, turn it into a client component by adding \"use client\" at the top of the file.\n\nBefore:\n  import {useCurrentFrame} from \"remotion\";\n\nAfter:\n  \"use client\";\n  import {useCurrentFrame} from \"remotion\";","messagePattern":"Remotion requires React\\.createContext, but it is \"undefined\"\\.\nIf you are in a React Server Component, turn it into a client component by adding \"use client\" at the top of the file\\.\n\nBefore:\n  import (.+?) from \"remotion\";\n\nAfter:\n  \"use client\";\n  import (.+?) from \"remotion\";","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"packages/core/src/_check-rsc.ts","lineNumber":16,"sourceCode":"import {createContext} from 'react';\n\nif (typeof createContext !== 'function') {\n\tconst err = [\n\t\t'Remotion requires React.createContext, but it is \"undefined\".',\n\t\t'If you are in a React Server Component, turn it into a client component by adding \"use client\" at the top of the file.',\n\t\t'',\n\t\t'Before:',\n\t\t'  import {useCurrentFrame} from \"remotion\";',\n\t\t'',\n\t\t'After:',\n\t\t'  \"use client\";',\n\t\t'  import {useCurrentFrame} from \"remotion\";',\n\t];\n\n\tthrow new Error(err.join('\\n'));\n}\n","sourceCodeStart":1,"sourceCodeEnd":18,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/_check-rsc.ts#L1-L18","documentation":"Thrown at module load time when React.createContext is undefined. This happens inside React Server Components (RSC) where React hooks and context APIs are not available. The message instructs adding the \"use client\" directive.","triggerScenarios":"Importing anything from remotion in a Next.js App Router server component (or any RSC framework) without the \"use client\" directive at the top of the file.","commonSituations":"Using remotion in a Next.js 13+ app router page/layout without marking it as a client component; importing remotion utilities from a server-side data-fetching module.","solutions":["Add \"use client\" as the first line of the file importing remotion.","Move the remotion import into a dedicated client component and import that component from the server file.","Ensure your bundler is not stripping React's createContext (check for multiple React versions)."],"exampleFix":"// before\nimport {useCurrentFrame} from \"remotion\";\nexport const MyComp = () => {\n  const f = useCurrentFrame();\n  return <div>{f}</div>;\n};\n\n// after\n\"use client\";\nimport {useCurrentFrame} from \"remotion\";\nexport const MyComp = () => {\n  const f = useCurrentFrame();\n  return <div>{f}</div>;\n};","handlingStrategy":"validation","validationCode":"// At top of any file importing remotion in an RSC framework:\n// 'use client';\n// Must be the very first statement.","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Add \"use client\" as the first line of any module importing remotion in Next.js app router.","Keep remotion imports in leaf client components, not shared server utilities."],"tags":["rsc","react","nextjs","ssr","use-client"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}