Не удается прочитать объект siteMetadata из файла gatsby-config.js с помощью Gatsby и Typescript - PullRequest
Новая
       25

Не удается прочитать объект siteMetadata из файла gatsby-config.js с помощью Gatsby и Typescript

0 голосов
/ 30 июня 2019

Я пытаюсь прочитать содержимое объекта siteMetadata, который я определил в файле gatsby-config.js, но каждый раз, когда я пытаюсь это сделать, я получаю эту ошибку 

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-plugin-ts-loader и необходимые настройки на gatsby-config.js.Я пытаюсь прочитать объект siteMetadata на начальной странице моего проекта.Я пытался использовать graphql и useStaticQuery из библиотеки gatsby, но это не удалось.Вот как я поступил 

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

А вот как я определил объект SiteMetada в gatsby-config.js 


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

Приложение работает без проблем, если я удалю весь запросЧтение сайта Метаданные.Я использую gatsby в подсистеме Windows для Linux - Ubuntu 18.04.1

1 Ответ

1 голос
/ 01 июля 2019

Когда я запускаю 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  "]))));

Гэтсби ожидает graphql запрашивает, чтобы быть в литерале шаблона, но tsc компилирует их в обычные функции.

Чтобы исправить это, вам нужно изменить tsconfig, чтобы вывести как минимум es6. 

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

Кстати, я недавно опубликовал плагин ts для gatsby, цель которого сделать использование gatsby в машинописи как можно более плавным.Еще одна вещь, которую он делает, это автоматически генерирует типизацию для запросов graphql.Буду признателен, если вы попробуете и сообщите мне, если возникнут какие-либо проблемы:

...