Gatsby+TypeScript引入外部模块函数触发ReferenceError问题

问题背景 #

我正在开发Gatsby站点的组件与工具，并将其打包为自定义npm模块statikon。核心Gatsby项目与statikon工具模块均基于TypeScript构建。目前遇到的问题是：在gatsby-node.ts的createPages函数中导入外部模块的函数并调用时，会抛出ReferenceError: Cannot access 'f' before initialization错误。

可行操作 #

导入组件 #

通过createPage的component属性导入模板可正常工作：

/* gatsby-node.ts */

// ... Inside createPages
createPage({
  component: path.resolve("./src/templates/default.template.tsx"),
});

我在核心Gatsby站点中做了代理来绑定SCSS：

/* ./src/templates/default.template.tsx */

import "../styles/global.scss";
import { DefaultTemplate } from "statikon";

export default DefaultTemplate;

注意：模板似乎在gatsby-node执行后的第二阶段运行。

导入类型 #

在gatsby-node.ts中导入类型也不会报错：

/* gatsby-node.ts */

import { DefaultTemplateContext } from "statikon";

// ... Inside createPages
createPage({
  context: {} as DefaultTemplateContext,
});

注意：类型在gatsby node转译为JS时会被忽略，不会在运行时调用，因此不会出现未定义问题。

失败操作 #

当尝试将外部模块statikon中的函数导入到gatsby-node.ts并调用时出现问题。

以下是statikon中的工具函数代码：

/* statikon/src/helpers/richTextToString.ts */

import { TextRichTextItemResponse } from "@notionhq/client/build/src/api-endpoints";

function richTextToString(texts: TextRichTextItemResponse[]): string {
  return texts
    .map(({ plain_text }) => {
      return plain_text;
    })
    .join(" ");
}

export default richTextToString;

在gatsby-node.ts中仅导入该函数而不调用不会报错：

/* gatsby-node.ts */

import richTextToString from "statikon/src/helpers/richTextToString";

但调用时会抛出ReferenceError：

/* gatsby-node.ts */

// ... Inside createPages
createPage({
  // ...
  path:
    url.type === "rich_text"
      ? richTextToString(url.rich_text as TextRichTextItemResponse[])
      : page.id,
});

错误信息：ReferenceError: Cannot access 'f' before initialization。

已尝试的解决方案 #

1. 移除依赖的工具方法 #

网上提到该错误可能由循环依赖导致，我尝试移除所有外部依赖重新导出方法，但gatsby-node.ts仍报错：

/* statikon/src/helpers/richTextToString.ts */

// import { TextRichTextItemResponse } from "@notionhq/client/build/src/api-endpoints";

function richTextToString(texts: { plain_text: string }[]): string {
  // 函数逻辑不变
}

2. 预转译模块后导入 #

我还尝试运行tsc --build将statikon模块转译到statikon/build目录，从该目录导入函数，但启动Gatsby时仍存在问题：

/* gatsby-node.ts */

import richTextToString from "statikon/build/helpers/richTextToString";

求助 #

为何其他模块可以向gatsby-node.ts暴露可导入的函数，而我的statikon模块不行？我肯定遗漏了打包流程中的某些关键点，求相关线索。

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