「Loading root component」逾時錯誤

錯誤訊息

如果你看到以下錯誤：

A delayRender() "Loading root component" was called but not cleared after 28000ms

這表示你指定的入口點（entry point）沒有呼叫 registerRoot()。

問題原因

Remotion 在啟動時需要一個入口點檔案，該檔案必須呼叫 registerRoot() 來向 Remotion 登錄你的合成清單（compositions）。

常見的錯誤原因有兩個：

原因一：傳入了合成清單檔案而非入口點

大多數範本的檔案結構如下：

src/
  index.ts        ← 入口點（正確：應傳入此檔案）
  Root.tsx        ← 合成清單（錯誤：不應傳入此檔案）
  MyComposition.tsx

若你誤將 src/Root.tsx 作為入口點傳入，Remotion 找不到 registerRoot() 呼叫，就會等到逾時。

原因二：傳入了單一組件檔案

同樣地，若你傳入的是某個組件檔案（例如 src/MyComposition.tsx），而該檔案只匯出一個 React 組件，沒有呼叫 registerRoot()，也會出現同樣的錯誤。

解決方案

確保你傳入的是呼叫了 registerRoot() 的入口點檔案。

標準入口點範例（`src/index.ts`）

import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
 
registerRoot(RemotionRoot);

標準合成清單範例（`src/Root.tsx`）

import { Composition } from "remotion";
import { MyComposition } from "./MyComposition";
 
export const RemotionRoot = () => {
  return (
    <>
      <Composition
        id="MyComposition"
        component={MyComposition}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

各使用情境的修正方式

CLI 渲染指令

在命令列中，入口點以引數方式傳入：

# 正確
npx remotion render src/index.ts MyComposition out/video.mp4
 
# 錯誤：傳入了 Root.tsx
npx remotion render src/Root.tsx MyComposition out/video.mp4

`bundle()` Node.js API

import { bundle } from "@remotion/bundler";
 
// 正確：傳入入口點
const bundled = await bundle({
  entryPoint: "./src/index.ts",
});
 
// 錯誤：傳入合成清單
// const bundled = await bundle({
//   entryPoint: "./src/Root.tsx",
// });

`deploySite()` Lambda API

import { deploySite } from "@remotion/lambda";
 
const { serveUrl } = await deploySite({
  entryPoint: require.resolve("./src/index.ts"), // 確保是入口點
  bucketName: "my-bucket",
  region: "us-east-1",
});

診斷步驟

找到你的入口點：通常是 src/index.ts 或 src/index.tsx。
確認入口點呼叫了 registerRoot()：用文字編輯器開啟該檔案，確認有 registerRoot(...) 的呼叫。
確認傳入的路徑正確：比對 CLI 指令或 API 呼叫中的 entryPoint 路徑。
檢查是否有多個入口點：若專案有多個 index.ts，確認傳入的是正確的那一個。