Satori未初始化报错：期望加载yoga却得到undefined的排查与修复

错误原因 #

这个错误的核心是Satori依赖的Yoga布局引擎在浏览器环境中未正确加载。Satori默认npm包未包含适配浏览器的Yoga构建版本，直接在浏览器中运行时，无法自动找到Yoga实例，导致初始化失败。你怀疑的svg-utils.ts代码不是触发该错误的直接原因——它只是Satori生成SVG后的转PNG逻辑，错误实际发生在Satori生成SVG的阶段。

修复步骤 #

1. 安装浏览器兼容的Yoga包 #

在项目中安装专门适配浏览器的Yoga核心包：

npm install @yoga-browser/core

2. 手动传入Yoga实例初始化Satori #

找到项目中初始化Satori的代码（通常在入口文件如index.tsx），修改为手动传入Yoga实例：

import satori from 'satori';
import { initYoga } from '@yoga-browser/core';

// 初始化Yoga实例
const yoga = initYoga();

// 传入yoga参数完成Satori初始化
const svg = await satori(
  <div style={{ width: 600, height: 400, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
    <h1>Hello, Satori!</h1>
  </div>,
  {
    width: 600,
    height: 400,
    yoga, // 手动传入初始化好的yoga实例
  }
);

3. 优化svg-utils.ts潜在风险（可选） #

虽然不影响当前错误修复，但你的svg-utils.ts存在getContext("2d")返回null的潜在报错风险，可修改如下：

export const svgToPngURL = (svg: string) =>
  new Promise<string>((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;
      const ctx = canvas.getContext("2d");
      if (!ctx) {
        reject(new Error('Failed to get canvas 2D context'));
        URL.revokeObjectURL(img.src);
        return;
      }
      ctx.drawImage(img, 0, 0);
      resolve(canvas.toDataURL("image/png"));
      URL.revokeObjectURL(img.src);
    };
    img.onerror = (e) => {
      reject(e);
      URL.revokeObjectURL(img.src);
    };
    img.src = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }));
  });

export const downloadSvgAsPng = async (svg: string) => {
  const pngURL = await svgToPngURL(svg);
  try {
    const a = document.createElement("a");
    a.href = pngURL;
    a.download = "Image.png";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  } finally {
    URL.revokeObjectURL(pngURL);
  }
};

验证修复 #

完成修改后重新运行npm start，点击下载按钮即可正常生成并下载PNG图片，不会再出现Satori未初始化的错误。

内容的提问来源于stack exchange，提问作者wyc