如何在Gatsby本地插件中配合Typescript使用wrapPageElement并解决报错

导致该报错有两个核心触发点：

• 你直接将wrapPageElement回调入参中的props（属于Gatsby页面上下文属性，包含location、pageContext、路由参数等非HTML合法属性）透传给了<div>标签，Gatsby 3.14.0对应的React版本对非法DOM属性的处理存在兼容性问题，导致内部PageRenderer组件识别返回的元素为无效对象。
• TypeScript编译导出不兼容：如果没有给本地插件配置正确的TS编译规则，或者未安装gatsby-plugin-typescript处理TS文件导出，你命名导出的wrapPageElement可能被编译为嵌套在default对象下的属性，Gatsby加载API时拿到的是对象而非可执行函数，触发类型错误。

1. 先移除包裹元素上的{...props}透传，你不需要把页面上下文属性传给普通DOM元素，修改src/wrapPageElement.tsx代码为：

import React from "react";
import { GatsbyBrowser, GatsbySSR } from "gatsby";

type WrapPageElement =
  | GatsbyBrowser["wrapPageElement"]
  | GatsbySSR["wrapPageElement"];

export const wrapPageElement: WrapPageElement = ({ element }) => {
  return <div>{element}</div>;
};

2. 如果修改后仍报错，调整gatsby-ssr.js和gatsby-browser.js的导入逻辑，避免TS命名导出的兼容问题，修改后代码为：

import { wrapPageElement } from "./src/wrapPageElement";
export const wrapPageElement = wrapPageElement;

3. 确认本地插件或主项目已经安装并在gatsby-config.js中配置了gatsby-plugin-typescript，支持TS/TSX文件的正常编译。
4. 清理Gatsby缓存后重启项目，排除历史缓存干扰：

gatsby clean && gatsby develop

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