Javascript 在Chrome扩展中呈现细枝模板

我正在尝试在chrome扩展中呈现一个小树枝（带有twigjs）模板。我目前正在使用browserify构建脚本编译以下typescript

import * as twig from "twig"

const MAIN_TEMPLATE: string = chrome.runtime.getURL("twig/main.html.twig");

document.addEventListener("DOMContentLoaded", () => {
        twig.renderFile(MAIN_TEMPLATE, (err: Error, html: string) => {
            document.querySelector("body").innerHTML = html;
        });
});

我已经确保将这些文件包含在我的

manifest.json

中

...
    "web_accessible_resources": [
        "twig/*.html.twig"
    ]
...

然而，在运行此命令时，我得到以下stacktrace。我真的不知道该怎么办，因为如果我把

chrome.runtime.getURL

输入地址栏，返回的URL就会解析

Uncaught TypeError: t.stat is not a function
    at Object.<anonymous> (twig.js:1)
    at Object.e.Templates.loadRemote (twig.js:1)
    at Object.e.exports.twig (twig.js:1)
    at Object.e.exports.renderFile (twig.js:1)
    at HTMLDocument.<anonymous> (browser-action.ts:7)

未捕获类型错误：t.stat不是函数
反对。（twig.js:1）
位于Object.e.Templates.loadRemote（twig.js:1）
位于Object.e.exports.twig（twig.js:1）
在Object.e.exports.renderFile（twig.js:1）
在HTMLDocument。（浏览器操作。ts:7）

翻阅一些

twigjs

源代码，使用

renderFile

助手似乎是我的错误。这是比较正确的

const MAIN_TEMPLATE_URI: string = chrome.runtime.getURL("twig/main.html.twig");
const MAIN_TEMPLATE: twig.Template = twig.twig({href: MAIN_TEMPLATE_URI, async: false};

document.querySelector("body").innerHTML = MAIN_TEMPLATE.render({tabs, tabListTemplate: TAB_LIST_TEMPLATE_URI});

我使用async false，因为它只从本地连接获取，所以同步加载模板时不应该有任何延迟