{"record":{"id":"263b7517ce1e7406","repo":"remotion-dev/remotion","slug":"invalid-element-source","errorCode":null,"errorMessage":"Invalid Element source","messagePattern":"Invalid Element source","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/browser-studio/src/browser-studio-operations.ts","lineNumber":343,"sourceCode":"\tconst componentName =\n\t\tStudioProtocolInternals.getElementComponentNameFromSourceCode(\n\t\t\telement.sourceCode,\n\t\t);\n\tconst elementFileName = StudioProtocolInternals.makeElementFileNameFromSlug(\n\t\tinstallationName ?? element.slug,\n\t);\n\tif (\n\t\telementFileName === null ||\n\t\t(typeof installationName === 'string' &&\n\t\t\telementFileName !== `${installationName}.element.tsx`)\n\t) {\n\t\tthrow new Error(\n\t\t\t'Use a lowercase installation name with letters, numbers and hyphens, without a file extension.',\n\t\t);\n\t}\n\n\tif (componentName === null) {\n\t\tthrow new Error('Invalid Element source');\n\t}\n\n\tconst target =\n\t\tdestination.type === 'current-composition'\n\t\t\t? await resolveCompositionComponentWithFile({\n\t\t\t\t\tcompositionFile: destination.compositionFile,\n\t\t\t\t\tcompositionId: destination.compositionId,\n\t\t\t\t\tenvironment: makeInMemoryInsertJsxElementCodemodEnvironment({\n\t\t\t\t\t\tproject,\n\t\t\t\t\t\tsvgMarkupToJsx,\n\t\t\t\t\t}),\n\t\t\t\t})\n\t\t\t: null;\n\tif (target !== null && !target.canAddSequence) {\n\t\tthrow new Error('Cannot insert Element into this composition component');\n\t}\n\n\tconst rootFile =","sourceCodeStart":325,"sourceCodeEnd":361,"githubUrl":"https://github.com/remotion-dev/remotion/blob/b2f4e34732f3c6c222ea029413e22dc402218cd7/packages/browser-studio/src/browser-studio-operations.ts#L325-L361","documentation":"getElementInstallPlanForProject (behind prepareElementInstall) parses the Remotion Element payload before insertion: it extracts the exported component name from element.sourceCode (StudioProtocolInternals.getElementComponentNameFromSourceCode) and derives a file name from element.slug (makeElementFileNameFromSlug). If either returns null, the payload cannot be turned into a project file and 'Invalid Element source' is thrown.","triggerScenarios":"prepareElementInstall with a StudioElementPayload whose sourceCode contains no recognizable exported component, or whose slug is empty/malformed so no valid element file name can be derived from it.","commonSituations":"Hand-built or serialized element payloads from an older @remotion/studio-protocol version; truncated or rewritten sourceCode that lost its export; slugs made only of characters invalid for file names; version skew between studio-protocol and browser-studio packages.","solutions":["Regenerate the payload with createElementPayload from the current @remotion/studio-protocol instead of constructing it by hand.","Ensure element.sourceCode exports a named React component (e.g. export const MyElement: React.FC = ...).","Use a non-empty, filename-safe kebab-case slug.","Align all @remotion/* package versions so payload formats match."],"exampleFix":null,"handlingStrategy":"validation","validationCode":"const isValidElementPayload = (payload: {\n  slug: string;\n  sourceCode: string;\n}): boolean =>\n  payload.slug.length > 0 &&\n  /export\\s+(const|function)\\s+[A-Z][A-Za-z0-9_]*/.test(payload.sourceCode);","typeGuard":"const isInstallableElementPayload = (\n  payload: StudioElementPayload,\n): payload is StudioElementPayload & {slug: string; sourceCode: string} =>\n  typeof payload.slug === 'string' &&\n  payload.slug.length > 0 &&\n  typeof payload.sourceCode === 'string' &&\n  /export\\s+(const|function)\\s+[A-Z][A-Za-z0-9_]*/.test(payload.sourceCode);","tryCatchPattern":"try {\n  const plan = await operations.element.prepareElementInstall(request);\n} catch (error) {\n  if (error instanceof Error && error.message === 'Invalid Element source') {\n    // regenerate the payload with createElementPayload from the current studio-protocol\n  }\n}","preventionTips":["Always build payloads with createElementPayload from the current @remotion/studio-protocol.","Validate the element source exports a component before offering it for install.","Keep @remotion/* versions aligned across the host and the payload producer."],"tags":["elements","studio-protocol","payload-validation"],"backgroundTag":"invalid-element-payload","analyzedSha":"b2f4e34732f3c6c222ea029413e22dc402218cd7","analyzedAt":"2026-09-09T13:27:51.281Z","contentChangedAt":"2026-09-09T13:27:51.281Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}