Chapter 302: v3.0 Migration

Core Idea

When upgrading from Remotion 2 to Remotion 3, note the following changes and apply them to your project.

Key Concepts

• How to upgrade
• Breaking changes
• Node 14 is required
• Remotion is built with React 18 types
• renderFrames()/renderStill(): compositionId parameter removed
• renderFrames()/renderStill(): renamed config in to composition
• renderFrames()/renderStill()/getCompositions(): Errors thrown in your app make the render fail
• renderFrames()/renderStill()/getCompositions(): Renamed webpackBundle to serveUrl

Code Examples

- "remotion": "^2.6.15"
- "@remotion/bundler": "^2.6.15"
- "@remotion/eslint-config": "^2.6.15"
- "@remotion/eslint-plugin": "^2.6.15"
- "@remotion/cli": "^2.6.15"
- "@remotion/renderer": "^2.6.15"
+ "remotion": "^3.0.0"
+ "@remotion/bundler": "^3.0.0"
+ "@remotion/eslint-config": "^3.0.0"
+ "@remotion/eslint-plugin": "^3.0.0"
+ "@remotion/cli": "^3.0.0"
+ "@remotion/renderer": "^3.0.0"

• What it demonstrates: Usage pattern for v3.0 Migration from the official docs.

Key Takeaways

1. Understand how to upgrade when working with v3.0 Migration.
2. Understand breaking changes when working with v3.0 Migration.
3. Understand node 14 is required when working with v3.0 Migration.
4. Understand remotion is built with react 18 types when working with v3.0 Migration.
5. Understand renderframes()/renderstill(): compositionid parameter removed when working with v3.0 Migration.

Connects To

• 2 0 Migration: related page in the Migration & Versioning section.
• 4 0 Migration: related page in the Migration & Versioning section.
• 5 0 Migration: related page in the Migration & Versioning section.