remotion-transition-series does cause ESM/CJS conflict

[goveo]

Bug Report 🐛

I'm trying to use remotion-transition-series lib, but the remotion Player component throws the following error:

use-current-frame.js:16 Uncaught Error: useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples

I'm trying to use TransitionSeries with IntroComposition and OutroComposition remotion composition components:

<AbsoluteFill style={{ backgroundColor: 'black' }}>
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={300}>
      <IntroComposition />
    </TransitionSeries.Sequence>

    <TransitionSeries.Transition
      durationInFrames={15}
      transitionComponent={LinearWipe}
    />
    
    <TransitionSeries.Sequence durationInFrames={300}>
      <OutroComposition />
    </TransitionSeries.Sequence>
  </TransitionSeries>
</AbsoluteFill>

And my composition components use the useCurrentFrame() hook inside.

Is it possible to somehow use useCurrentFrame in that case?

Source code for TransitionSeries component

[JonnyBurger]

Thanks for reporting - we've seen your issue and acknowledge it! Given an increase in issues and requests, it will take a few days for us to investigate and respond to it - thanks for your patience.

[patsalv]

Hey @goveo We found out that the remotion-transition-series library does not support ES modules, and we have yet to investigate further to find out how to evade this problem. We'll give an update when we know more

[marcusstenbeck]

@patsalv would updating to support ESM in remotion-transition-series solve this?

[JonnyBurger]

@marcusstenbeck Indeed it will.

We have https://github.com/remotion-dev/remotion/issues/2907 open which will establish best practices for shipping Remotion libraries with CJS+ESM, maybe after it is done, you can migrate your library to it.

[marcusstenbeck]

@JonnyBurger subbed to the issue, thanks