GatsbyJS迁移TS时gatsby-node.ts的createPages不生效问题

核心错误是Gatsby生命周期函数导出名称不匹配：

• 原有JS版本是将页面创建逻辑挂载到exports.createPages，对应Gatsby专门负责动态创建页面的生命周期钩子
• 迁移TS时你错误将导出常量命名为sourceNodes，仅给它标注了GatsbyNode["createPages"]的类型。Gatsby运行时是通过导出的函数名识别对应生命周期逻辑的，类型标注仅在TS编译阶段生效，不会影响运行时的钩子识别
• sourceNodes是Gatsby另一个独立的生命周期API，作用是构建阶段向GraphQL层新增自定义数据源节点，和创建页面的逻辑完全无关，你写的页面创建逻辑被绑定到了错误的钩子上，Gatsby在创建页面的阶段根本不会执行这段代码，自然无法生成对应页面。

你看到的works-layout.tsx相关警告是连锁反应：因为动态创建页面的逻辑没有执行，Gatsby没有将该组件识别为页面模板，只会把它判定为普通组件，因此提示普通组件内导出的页面查询不会运行。

只需要修正导出的函数名为createPages即可，同时补充空值兼容逻辑避免运行时报错，修正后的完整代码如下：

import type { GatsbyNode } from "gatsby"
import path from "path"

export const createPages: GatsbyNode["createPages"] = async ({ graphql, actions, reporter }) => {
    const { createPage } = actions
    const result = await graphql(`
        query {
            allMdx {
                edges {
                    node {
                        id
                        slug
                    }
                }
            }
        }
    `)
    if (result.errors) {
        reporter.panicOnBuild('🚨  ERROR: Loading "createPages" query')
    }
    
    const posts = result.data?.allMdx.edges

    posts?.forEach(({ node }) => {
        createPage({
            path: `/work/${node.slug}`,
            component: path.resolve(`./src/components/works-layout.tsx`),
            context: { id: node.id },
        })
    })
}

修改后重新执行构建命令，页面创建逻辑会正常触发，之前的组件查询警告也会自动消失。

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