Svelte应用中VexFlow无内容渲染的问题求助

我已经把VexFlow添加到了项目的package.json里，还把GitHub上的示例代码放到了我的Svelte组件中。

我已经搞明白需要先判断(browser)，避免服务端渲染时出错——之前没加这个的时候，直接报了ReferenceError: document is not defined at Factory.initRenderer的错误，现在这个问题解决了。

但过了这一步之后，控制台没有报错，可页面上就是不显示乐谱。output div里什么都没有：看不到内容，也没有生成对应的DOM元素。不过我通过console.log能确认代码确实执行了，而且Factory、EasyScore、System都是正常定义的。

我到底漏掉了什么呢？

下面是我的组件代码：

<script>
import Vex from 'vexflow';
import { browser } from '$app/environment';

const { Factory, EasyScore, System } = Vex.Flow;

if (browser) {
  const vf = new Factory({
    renderer: { elementId: 'output', width: 500, height: 200 },
  });

  const score = vf.EasyScore();
  const system = vf.System();

  system
    .addStave({
      voices: [
        score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
        score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
      ],
    })
    .addClef('treble')
    .addTimeSignature('4/4');

  vf.draw();

  console.log(Factory, EasyScore, System);
}
</script>

<div id="output"></div>

备注：内容来源于stack exchange，提问作者Allan Tokuda