{"record":{"id":"11e16cea08a30478","repo":"remotion-dev/remotion","slug":"animationdata-should-be-provided-as-an-object-if","errorCode":null,"errorMessage":"animationData should be provided as an object. If you only have the path to the JSON file, load it and pass it as animationData. See https://remotion.dev/docs/lottie/lottie#example for more information.","messagePattern":"animationData should be provided as an object\\. If you only have the path to the JSON file, load it and pass it as animationData\\. See https://remotion\\.dev/docs/lottie/lottie#example for more information\\.","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/lottie/src/Lottie.tsx","lineNumber":27,"sourceCode":"\n/**\n * @description\tPart of the @remotion/lottie package.\n * @see [Documentation](https://www.remotion.dev/docs/lottie/lottie)\n */\nexport const Lottie = ({\n\tanimationData,\n\tclassName,\n\tdirection,\n\tloop,\n\tplaybackRate,\n\tstyle,\n\tonAnimationLoaded,\n\trenderer,\n\tpreserveAspectRatio,\n\tassetsPath,\n}: LottieProps) => {\n\tif (typeof animationData !== 'object') {\n\t\tthrow new Error(\n\t\t\t'animationData should be provided as an object. If you only have the path to the JSON file, load it and pass it as animationData. See https://remotion.dev/docs/lottie/lottie#example for more information.',\n\t\t);\n\t}\n\n\tvalidatePlaybackRate(playbackRate);\n\tvalidateLoop(loop);\n\n\tconst animationRef = useRef<AnimationItem | null>(null);\n\tconst currentFrameRef = useRef<number | null>(null);\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\n\tconst onAnimationLoadedRef =\n\t\tuseRef<LottieProps['onAnimationLoaded']>(onAnimationLoaded);\n\tonAnimationLoadedRef.current = onAnimationLoaded;\n\tconst {delayRender, continueRender} = useDelayRender();\n\n\tconst [handle] = useState(() =>\n\t\tdelayRender('Waiting for Lottie animation to load'),","sourceCodeStart":9,"sourceCodeEnd":45,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/lottie/src/Lottie.tsx#L9-L45","documentation":"The @remotion/lottie Lottie component requires animationData as a parsed JavaScript object (the Lottie JSON already JSON.parse'd). It throws if `typeof animationData !== 'object'`, catching the common mistake of passing a file path string or a raw JSON string.","triggerScenarios":"Passing a URL/path string instead of the loaded object; passing a JSON string instead of parsing it first; passing undefined because the import failed; passing a Promise or fetch Response.","commonSituations":"Using import animationData from './anim.json' but the bundler returned a string; fetching the Lottie JSON at runtime and forgetting to call .json(); mixing up the path-based API (lottie-web) with this component.","solutions":["Import the JSON file as an object (most bundlers do this by default): `import animationData from './anim.json'`.","If fetching at runtime, await res.json() before rendering the <Lottie>.","If you only have a path string, fetch + JSON.parse it first.","Confirm animationData is truthy before rendering to avoid passing undefined."],"exampleFix":"// before\n<Lottie animationData={'/lotties/anim.json'} />\n// after\nimport animData from './anim.json';\n// ...\n<Lottie animationData={animData} />","handlingStrategy":"type-guard","validationCode":"function isAnimationObject(v: unknown): v is Record<string, unknown> {\n  return typeof v === 'object' && v !== null && !Array.isArray(v);\n}\nif (!isAnimationObject(animationData)) {\n  throw new Error('Pass a parsed Lottie JSON object, not a path or string');\n}","typeGuard":"const isLottieData = (v: unknown): v is Record<string, unknown> =>\n  typeof v === 'object' && v !== null && 'v' in v && 'fr' in v;","tryCatchPattern":"try {\n  return <Lottie animationData={animationData} />;\n} catch (e) {\n  if (/animationData should be provided as an object/i.test((e as Error).message)) {\n    const parsed = await (await fetch(src)).json();\n    return <Lottie animationData={parsed} />;\n  }\n  throw e;\n}","preventionTips":["Import Lottie JSON as a module object: `import data from './anim.json'`.","When fetching at runtime, await res.json() before rendering <Lottie>.","Guard with typeof animationData === 'object' to render a placeholder while loading.","Never pass a file path or raw JSON string to the component."],"tags":["typescript","lottie","validation","props","react"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}