无法使用 Gatsby 和 Typescript 从 gatsby-config.js 文件读取 siteMetadata 对象

Question

我正在尝试读取我在 gatsby-config.js 文件中定义的 siteMetadata 对象的内容，但每次我尝试都会收到此错误

ERROR in ./src/pages/index.tsx
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
TypeError: Cannot read property 'type' of null
    at VariableDeclarator (/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/babel-plugin-remove-graphql-queries/index.js:277:81)
    at NodePath._call
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitMultiple
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/context.js:85:17)
    at TraversalContext.visit
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/context.js:144:19)
    at Function.traverse.node
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/index.js:94:17)
    at NodePath.visit
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/path/context.js:95:18)
    at TraversalContext.visitQueue
ℹ ｢wdm｣: Failed to compile.

我正在使用带有打字稿的 Gatsby。我在 gatsby-config.js 上安装了插件 gatsby-plugin-ts-loader 和所需的设置。我正在尝试读取项目起始页中的 siteMetadata 对象。我尝试使用 gatsby 库中的 graphql 和 useStaticQuery，但失败了。以下是我的处理方式

  const data = useStaticQuery(graphql`
    query IndexQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

这是我在 gatsby 中定义 SiteMetada 对象的方式-config.js


  siteMetadata: {
    title: 'Saturn web',
    author: 'FunctionalStack',
    description: 'Gatsby with typscript',
    siteUrl: 'http://localhost :8000/'
  }

如果我删除所有读取 siteMetadata 的查询，应用程序运行没有问题。我在 Windows 子系统上使用 gatsby for Linux - Ubuntu 18.04.1

Answer 1

当我运行 tsc -p . 在你的根目录中检查输出时，我发现 tsc 编译了这个：

  const data = useStaticQuery(graphql`
    query IndexQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

进入这个：

var data = useStaticQuery(graphql(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    query IndexQuery {\n      site {\n        siteMetadata {\n          title\n        }\n      }\n    }\n  "], ["\n    query IndexQuery {\n      site {\n        siteMetadata {\n          title\n        }\n      }\n    }\n  "]))));

Gatsby 期望 graphql 查询在模板文字中，但 tsc 将它们编译成常规函数。

为了解决这个问题，您需要更改 tsconfig 以至少输出 es6。

// tsconfig.json
{
  compileOptions: {
    "module": "esnext",
    "target": "esnext", <-- or es6 & above
  }
}

顺便说一句，我最近为 gatsby 发布了一个 ts 插件，旨在使在 typescript 中使用 gatsby 尽可能顺畅。它做的一件不同的事情是自动为 graphql 查询生成类型。如果您尝试一下，我将不胜感激，如果有任何问题请告诉我：

无法使用 Gatsby 和 Typescript 从 gatsby-config.js 文件读取 siteMetadata 对象

Can’t read siteMetadata object from gatsby-config.js file with Gatsby and Typescript

node.js

typescript

reactjs

babeljs

gatsby