Wrong type for LottieComponentProps

[irangarcia]

Describe the bug

Adding a path prop to the Lottie component is giving me a type error saying the path does not exist on the component props

To Reproduce Add path prop to the <Lottie /> component

Expected behavior Don't show me a type error

Screenshots

Property 'path' does not exist on type 'IntrinsicAttributes & Omit<AnimationConfigWithData<"svg">, "container" | "animationData"> & { animationData: unknown; lottieRef?: LottieRef | undefined; ... 9 more ...; onDestroy?: AnimationEventHandler<...> | ... 1 more ... | undefined; } & Omit<...> & { ...; }'.

[GhostyJade]

@irangarcia viewing types declaration there's no "path" prop for the Lottie component (not even for the v3 branch). The type error you are seeing is generated by typescript and it's there by default. I don't think this is an issue with lottie-react.

I think that you want to set the animation data to display, right? In that case, use the 'animationData' prop.

[irangarcia]

Yep, the problem is that does not exist in the types declarations.

But the lottie-web accepts two mutually exclusive params to load the animation: animationData that is the object with the exported animation and path which is the relative path to the animation object.

I assume that in the v3 will be called src that you can pass, what is now the animationData or path.

[avivnakar]

Another problem with LottieComponentProps is with React.lazy. there is mismatch between this type and the expected props for the component if loaded lazily.

I think it is about ref and or children typing but not 100% sure. If so, could be fixed by using some react types (such as FC, Props With Children etc...)

I'll try to provide more information with code example later on

[irangarcia]

Workaroud for now:

Add/create index.d.ts

declare module 'lottie-react' {
    export interface LottieComponentProps extends LottieOptions {
        path: string;
    }
}

[acephillips]

@irangarcia Did you add the index.d.ts directly to node_modules for the package? Or was it added to a file in the component folder?

[irangarcia]

@acephillips root of the application