Chapter 114: Webpack dynamic imports

Core Idea

A common need in Remotion is to import assets from dynamic paths. This means that sometimes you don't know the exact path of an asset that should be imported upfront and you want to calculate it during runtime.

Key Concepts

• Recommended: Use staticFile() instead
• Write dynamic expressions correctly
• Import assets at runtime
• Struggling?

Code Examples

export const DynamicImports: React.FC = () => {
  const frame = useCurrentFrame();
  const img = "./assets/image" + frame + ".png";
  return <Img src={require(img)} />;
};

• What it demonstrates: Usage pattern for Webpack dynamic imports from the official docs.

Key Takeaways

1. Understand recommended: use staticfile() instead when working with Webpack dynamic imports.
2. Understand write dynamic expressions correctly when working with Webpack dynamic imports.
3. Understand import assets at runtime when working with Webpack dynamic imports.
4. Understand struggling? when working with Webpack dynamic imports.

Connects To

• Authoring Packages: related page in the CLI & Bundling section.
• Bundle: related page in the CLI & Bundling section.
• Bundler: related page in the CLI & Bundling section.