使用getServerData的Gatsby SSR页面结合gatsby-source-wordpress构建报错

现象 #

站点初始构建正常，但同时使用gatsby-source-wordpress和基于getServerData的SSR页面时，执行gatsby build会触发错误：

ERROR #98001 ENGINE.VALIDATION
Built Rendering Engines failed validation.

Error, when running gatsby build.

将Gatsby验证引擎的silent参数设为false后，出现更具体的错误：

gatsby-source-wordpress diff schemas
Validating Rendering Engines
error Error: [Immer] minified error nr: 18 'MapSet'. Find the full error at...

单独使用getServerData时构建正常，仅与gatsby-source-wordpress结合时出问题；gatsby develop可正常运行，仅build命令报错。

相关配置与代码 #

package.json #

"dependencies": {
    "gatsby": "^5.3.2",
    "gatsby-adapter-netlify": "^1.1.3",
    "gatsby-plugin-alias-imports": "^1.0.5",
    "gatsby-plugin-image": "^3.13.1",
    "gatsby-plugin-manifest": "^5.3.1",
    "gatsby-plugin-netlify": "^5.1.1",
    "gatsby-plugin-offline": "^6.3.1",
    "gatsby-plugin-react-helmet": "^6.3.0",
    "gatsby-plugin-sass": "^6.13.1",
    "gatsby-plugin-sharp": "^5.13.1",
    "gatsby-source-filesystem": "^5.13.1",
    "gatsby-source-wordpress": "^7.13.3",
    "gatsby-transformer-sharp": "^5.13.1",
    "html-react-parser": "^5.1.8",
    "lodash": "^4.17.20",
    "postcss": "^8.2.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "typeface-merriweather": "1.1.13",
    "typeface-montserrat": "1.1.13"
  },
  "devDependencies": {
    "dumper.js": "^1.3.1",
    "eslint-import-resolver-alias": "^1.1.2",
    "prettier": "3.2.5"
  }

SSR页面代码 #

import * as React from "react"
import { getPreviewPage } from "@api/preview"

const Preview = ({ serverData }) => (
  <main>
    <h1>SSR page</h1>
    <h2>Page title: {serverData.title}</h2>
  </main>
)

export default Preview

export async function getServerData({ query }) {
  const page = await getPreviewPage(query.id)

  return {
    props: page,
  }
}

构建日志 #

success onPreBootstrap - 3.054s
success  gatsby-source-wordpress  ensuring plugin requirements are met - 0.027s
success  gatsby-source-wordpress  diff schemas - 2.220s
success  gatsby-source-wordpress  ingest WPGraphQL schema - 2.336s
success createSchemaCustomization - 2.392s
success  gatsby-source-wordpress  pull updates since last build - 0.870s
success  gatsby-source-wordpress  fetch root fields - 1.042s
success Clean up stale nodes - 0.007s - 10/0 0.00/s
success Checking for changed pages - 0.000s
success source and transform nodes - 1.150s
info Writing GraphQL type definitions to /Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/schema.gql
success building schema - 0.360s
success createPages - 0.065s
success createPagesStatefully - 0.038s
info Total nodes: 113, SitePage nodes: 10 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success Cleaning up stale page-data - 0.003s
success onPreExtractQueries - 0.001s
success extract queries from components - 1.392s
success write out redirect data - 0.001s
success Build manifest and related icons - 0.090s
success onPostBootstrap - 0.093s
info bootstrap finished - 53.544s
success write out requires - 0.004s
success Building production JavaScript and CSS bundles - 0.641s
⠦ Building Rendering Engines
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (123kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (123kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (123kiB) impacts deserialization performance (consider using Buffe
⠇ Building Rendering Engines
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (835kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (835kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (835kiB) impacts deserialization performance (consider using Buffe
success Building Rendering Engines - 2.198s
success Building HTML renderer - 1.089s
success Execute page configs - 0.208s
⠼  gatsby-source-wordpress  ingest WPGraphQL schema
⠸  gatsby-source-wordpress  diff schemas
⠼ Validating Rendering Engines
error Error: [Immer] minified error nr: 18 'MapSet'. Find the full error at: ...
    at n (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:296280:121)
    at b (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:296280:1962)
    at N (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:296280:3448)
    at Object.get (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:296280:14315)
    at Object.setState [as remoteSchema/setState] (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:296404:7)
    at combinedReducer (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:295890:40)
    at /Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:296229:14
    at produce (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:296280:15938)
    at /Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:296228:61
    at combination (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:34586:29)
    at dispatch (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:34326:22)
    at Object.dispatch (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:296111:16)
    at Object.assign.isEffect [as setState] (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:296007:20)
    at checkIfSchemaHasChanged (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:401709:48)
    at runSteps (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:293732:9)
    at ingestRemoteSchema (/Users/Matt/Documents/Workspace/Menabrea/menabrea-site/.cache/query-engine/index.js:401578:5)
error  gatsby-source-wordpress  
⠼  gatsby-source-wordpress  ingest WPGraphQL schema
⠼  gatsby-source-wordpress  diff schemas
failed Validating Rendering Engines - 2.916s

 ERROR #98001  ENGINE.VALIDATION

Built Rendering Engines failed validation.

Please open an issue with a reproduction at https://gatsby.dev/new-issue for more help.



  Error: Worker exited before finishing task
  
  - index.js:205 ChildProcess.<anonymous>
    [menabrea-site]/[gatsby-worker]/dist/index.js:205:41
  

not finished  gatsby-source-wordpress  ingest WPGraphQL schema - 0.429s
not finished  gatsby-source-wordpress  diff schemas - 0.426s

解决办法 #

1. 升级依赖版本 #

当前使用的Gatsby和gatsby-source-wordpress版本存在兼容问题，建议升级到最新稳定版：

• 将gatsby升级到^5.13.x及以上
• 将gatsby-source-wordpress升级到^7.20.x及以上

执行命令：

npm update gatsby gatsby-source-wordpress

2. 临时禁用引擎验证 #

在gatsby-config.js中添加配置跳过渲染引擎验证（仅作临时 workaround，不推荐长期使用）：

module.exports = {
  // ...其他配置
  flags: {
    ENGINE_VALIDATION: false
  }
}

3. 处理getServerData返回值 #

Immer错误提示的MapSet问题，大概率是getPreviewPage返回的数据包含不可序列化的Map或Set类型。将返回数据转换为普通可序列化对象：

export async function getServerData({ query }) {
  const page = await getPreviewPage(query.id)
  // 转换为普通可序列化对象
  const serializedPage = JSON.parse(JSON.stringify(page))
  return {
    props: serializedPage,
  }
}

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