运行 Gatsby build/develop 时如何修复 Invariant Violation 错误

IT技术 reactjs gatsby gatsby-image gatsby-source-apiserver
2021-05-21 10:46:31

我使用 node v16.0.0、Gatsby v3.6.1和Yarn v1.22.10作为带有插件的依赖管理器：

我在文件中使用了以下函数gatsby-node.js在 GraphQL 中创建节点，其中包含稍后可以查询的图像：

// gatsby-node.js
const { createRemoteFileNode } = module.require(`gatsby-source-filesystem`)

exports.onCreateNode = async ({   node,
  actions: { createNode },
  store,
  cache,
  createNodeId,
 }) => {
  if (node.internal.type === `API__images` && node.pk) {
    let fileNode = await createRemoteFileNode({
      url: node.url, // string that points to the URL of the image
      parentNodeId: node.id, // id of the parent node of the fileNode you are going to create
      createNode, // helper function in gatsby-node to generate the node
      createNodeId, // helper function in gatsby-node to generate the node
      cache, // Gatsby's cache
      store, // Gatsby's Redux store
    })
    // if the file was created, attach the new node to the parent node
    if (fileNode) {
      node.image___NODE = fileNode.id
    }
  }
}

这似乎在运行时正常工作，gatsby develop或者gatsby build如果我尝试再次运行任何这些命令（使用相同的源数据），则会引发以下错误：

Missing onError handler for invocation 'building-schema', 
error was Invariant Violation: Encountered an error 
trying to infer a GraphQL type for: `image___NODE`. 
There is no corresponding node with the `id` field matching: 

"27564a59-be49-51fb-98d6-c32de4f2030c",
"379357c0-1faa-5177-806d-7f155f2e3e85",

...

那些27564a59-b..,379357c0-1..是在gatsby-node.js函数上创建的图像节点 ID 。

如果我运行gatsby clean它会正常工作，但使用 gatsby clean 不是一个好的解决方案，因为清理缓存会破坏增量构建。

有人知道如何解决这个错误吗？我应该为节点使用固定 ID 吗？

追溯错误：

(/my-project/node_modules/invariant/invariant.js:40:15)
    at getFieldConfigFromFieldNameConvention (/my-project/node_modules
/gatsby/src/schema/infer/add-inferred-fields.js:227:3)
    at getFieldConfig (/my-project/node_modules/gatsby/src/schema/infe
r/add-inferred-fields.js:129:19)
    at forEach (/my-project/node_modules/gatsby/src/schema/infer/add-i
nferred-fields.js:79:25)
    at Array.forEach (<anonymous>)
    at addInferredFieldsImpl (/my-project/node_modules/gatsby/src/sche
ma/infer/add-inferred-fields.js:63:28)
    at addInferredFields (/my-project/node_modules/gatsby/src/schema/i
nfer/add-inferred-fields.js:27:3)
    at addInferredType
(/my-project/node_modules/gatsby/src/schema/infer/index.js:101:3)
    at map
(/my-project/node_modules/gatsby/src/schema/infer/index.js:65:5)
    at Array.map (<anonymous>)
    at addInferredTypes
(/my-project/node_modules/gatsby/src/schema/infer/index.js:64:23)
    at updateSchemaComposer
(/my-project/node_modules/gatsby/src/schema/schema.js:169:9)
    at buildSchema
(/my-project/node_modules/gatsby/src/schema/schema.js:64:3)
    at build
(/my-project/node_modules/gatsby/src/schema/index.js:105:18)
    at buildSchema
(/my-project/node_modules/gatsby/src/services/build-schema.ts:19:3)'
1个回答

在这个GitHub 线程上，这似乎是一个非常新鲜的话题。

如果清理缓存不是您的用例的解决方案，那么似乎可以将问题从 npm 移动到作为依赖项管理器的 yarn 来解决。

此外，还尝试通过以下方式删除所有node_modules和锁定的依赖项：

rm -rf node_modules && rm -rf package-lock.json

进行全新安装。

根据提示的错误，我会尝试将您的节点创建包装在try/ 中catch：

// gatsby-node.js
const { createRemoteFileNode } = module.require(`gatsby-source-filesystem`)

exports.onCreateNode = async ({   node,
  actions: { createNode },
  store,
  cache,
  createNodeId,
 }) => {
  let fileNode;
 try{
  if (node.internal.type === `API__images` && node.pk) {
    fileNode = await createRemoteFileNode({
      url: node.url, // string that points to the URL of the image
      parentNodeId: node.id, // id of the parent node of the fileNode you are going to create
      createNode, // helper function in gatsby-node to generate the node
      createNodeId, // helper function in gatsby-node to generate the node
      cache, // Gatsby's cache
      store, // Gatsby's Redux store
    })
  } catch (e) {
      console.log(e)
    }
    // if the file was created, attach the new node to the parent node
    if (fileNode) {
      node.image___NODE = fileNode.id
    }
  }
}

我知道您说过运行 agatsby clean不是一种选择，但是当您更改核心节点时，您可能会被迫运行一个。一旦您的项目完成（第一次构建），下一次构建将获取并使用您的缓存。

其它你可能感兴趣的问题
上一篇如何检测 Web 应用程序是否在 Electron 中运行 下一篇'不变违规：requireNativeComponent：在 UIManager 中找不到“RNSScreen”。' react本机cli中的错误