Skip to main content

resolveCompositionComponent()v4.0.528

Locates the component used by a composition, following supported project imports and re-exports.

warning

Draft API: This API is experimental and may change.

resolve-composition-component.ts
import {resolveCompositionComponent, type CodemodProject} from '@remotion/codemods';

declare const project: CodemodProject;

const result = resolveCompositionComponent({
  project,
  compositionFile: 'src/Root.tsx',
  compositionId: 'MyComposition',
});

console.log(result);

The component must return supported JSX. Dynamic component expressions and unresolved imports throw an error. This function does not load or execute components.

Options​

project​

An in-memory CodemodProject. The input project is not mutated.

compositionFile​

The file registering the composition.

compositionId​

The static ID of the composition to edit.

Return value​

Returns an object with the following properties.

filePath​

The component source file, using its key in project.files.

exportName​

The resolved export name, or default.

location​

The declaration's {line, column} location. Lines are one-based; columns are zero-based.

canAddContent​

Whether the component's return value supports content insertion. Pass filePath and exportName as a {type: 'component'} target to addElement() to insert into the resolved component.

Errors​

Throws when the target cannot be resolved, the requested edit is unsupported, or an option is invalid. Failed edits leave the input project unchanged.

Compatibility​

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

See also​