Skip to main content

defaultProps 太大 - 无法序列化

如果在渲染过程中遇到错误：

🌐 If you experience an error during rendering:

defaultProps too big - could not serialize - the defaultProps of composition with ID "[composition-id]" - the object that was passed to defaultProps was too big. Learn how to mitigate this error by visiting https://remotion.dev/docs/troubleshooting/serialize-defaultprops

这意味着传递给 defaultProps 的用于指定组合的对象太大，Chrome 无法将其序列化为字符串。

🌐 It means the object that was passed to defaultProps for the specified composition is too big that Chrome cannot serialize it into a string.

如果你看到这个错误的变体：

🌐 If you see this variant of the error:

defaultProps too big - Could not serialize - an object that was passed to defaultProps was too big. Learn how to mitigate this error by visiting https://remotion.dev/docs/troubleshooting/serialize-defaultprops

defaultProps 并不太大，但整个作品列表太大，无法序列化。

🌐 The defaultProps is not too big, but the list of compositions as a whole is too big to serialize.

为什么会出现这个错误​

🌐 Why this error occurs

Remotion 正在尝试使用 getCompositions() 收集组成列表，并将它们从无头浏览器复制到 Node.JS。在此操作过程中，需要将 JavaScript 对象转换为字符串。其上限为 256MB，然而根据 Remotion 所运行的机器，错误也可能在较小的负载上发生。

🌐 Remotion is trying to gather a list of compositions using getCompositions(), and is copying them from the headless browser into Node.JS. During this operation, the JavaScript object needs to be converted into a string. The upper limit for this is 256MB, however dependending on the machine Remotion runs on, the error may also occur on smaller payloads.

如何修复错误​

🌐 How to fix the error

避免将巨大的数据负载传递给 defaultProps。相反，应在组件内部根据精简的 defaultProps 派生出大的数据负载。例如：

🌐 Avoid passing huge data payloads to defaultProps. Instead, derive the big data payload inside the component based on slim defaultProps. For example:

  • 不要传递表示资源的数据 URL 或 Buffer，而是传递资源的 URL，并从组合内部获取该资源
  • 不要使用 getAudioData() 获取音频可视化并将其作为默认属性传递——相反，传递音频资源的 URL，并在组件内部获取音频可视化。

示例：

🌐 Example:

❌ Avoid - big data chunk as defaultProps
import { AudioData, getAudioData } from "@remotion/media-utils";
import { useEffect, useState } from "react";
import {
  cancelRender,
  Composition,
  continueRender,
  delayRender,
  staticFile,
} from "remotion";

// MyComp.tsx
const MyComp: React.FC<{
  audioData: AudioData | null;
}> = ({ audioData }) => {
  return null;
};

// src/Root.tsx
const RemotionRoot = () => {
  const [audioData, setAudioData] = useState<AudioData | null>(null);
  const [handle] = useState(() => delayRender());

  useEffect(() => {
    getAudioData(staticFile("audio.mp3"))
      .then((data) => {
        setAudioData(data);
        continueRender(handle);
      })
      .catch((e) => {
        cancelRender(e);
      });
  }, [handle]);

  return (
    <Composition
      id="my-comp"
      durationInFrames={90}
      width={1080}
      height={1080}
      fps={1080}
      component={MyComp}
      defaultProps={{
        audioData,
      }}
    />
  );
};

这可能会导致问题，因为 audioData 变量可能会变得非常大，因为它包含关于波形的原始数据，而 Remotion 需要将这些数据序列化为字符串，这很慢，并且可能导致此错误。相反，应传递音频 URL，并在组件内部进行音频数据的获取：

🌐 This can lead to problems because the audioData variable can become very big since it contains raw data about the waveform, and Remotion needs to serialize this data into a string, which is slow and can lead to this error. Instead, pass the audio URL and do the audio data fetching inside the component:

✅ Do - Fetch data inside composition
import { getAudioData } from "@remotion/media-utils";
import { useEffect, useState } from "react";
import {
  cancelRender,
  Composition,
  continueRender,
  delayRender,
  staticFile,
} from "remotion";

// MyComp.tsx
const MyComp: React.FC<{ src: string }> = ({ src }) => {
  const [audioData, setAudioData] = useState<any>(undefined);
  const [handle] = useState(() => delayRender());

  useEffect(() => {
    getAudioData(src)
      .then((data) => {
        setAudioData(data);
        continueRender(handle);
      })
      .catch((e) => {
        cancelRender(e);
      });
  }, [handle]);

  return null;
};

// src/Root.tsx
const RemotionRoot = () => {
  return (
    <Composition
      id="my-comp"
      durationInFrames={90}
      width={1080}
      height={1080}
      fps={1080}
      component={MyComp}
      defaultProps={{
        src: staticFile("audio.mp3"),
      }}
    />
  );
};

另请参阅​

🌐 See also

Last updated on