如何修复 gatsby_1 未定义答案

【问题标题】：How to fix gatsby_1 is undefined如何修复 gatsby_1 未定义
【发布时间】：2019-09-16 13:27:49
【问题描述】：

我正在尝试将 graphquery 与 react 和 gatsby 一起使用，但我无法获取数据。如果它是用js编写的，我可以得到数据。我该如何解决？谢谢。

我从 gatsby typesript starter 启动它，但它不能正常工作。

Uncaught ReferenceError: gatsby_1 is not defined
    at ./src/templates/index-page.tsx.exports.IndexPageTemplate (index-page.tsx:56)

index.js:2177 The above error occurred in the <TemplateWrapper> component:
    in TemplateWrapper (created by IndexPage)


React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

我将 sitemetadata 文件从 js 更改为 tsx，然后发生错误

SiteMetaData.tsx

import { graphql, useStaticQuery } from "gatsby";

const useSiteMetadata = () => {
  const { data } = useStaticQuery(
    graphql`
      query GetSiteMetaData{
        site {
          siteMetadata {
            title
            description
          }
        }
      }
    `
  );
  return data.siteMetaData;
};

export default useSiteMetadata;

布局.tsx

import * as React from "react";
import Helmet from "react-helmet";
import Footer from "../Organisms/Footer";
import Navbar from "../Organisms/Navbar";
import useSiteMetadata from "../Organisms/SiteMetadata";

interface TemplateWrapperProps {
  children: React.ReactChild;
}

const TemplateWrapper: React.SFC<TemplateWrapperProps> = ({ children }) => {

  const { title, description }: any = useSiteMetadata();
  return (
    <div>
      <Helmet>
        <html lang="ja" />
        <title>{title}</title>
        <meta name="description" content={description} />

        <meta name="theme-color" content="#fff" />

        <meta property="og:type" content="business.business" />
        {/**<meta property="og:title" content={title} /> */}
        <meta property="og:url" content="/" />
        <meta property="og:image" content="/img/og-image.jpg" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      </Helmet>
      <Navbar />
      <div>{children}</div>
      <Footer />
    </div>
  );
};

export default TemplateWrapper;

【问题讨论】：

可以提供index-page.tsx的内容吗？

标签： reactjs typescript graphql gatsby

【解决方案1】：

尝试将 graphql 导入到他自己的行中，为我工作：

import { graphql } from 'gatsby';
import { Link, useStaticQuery } from 'gatsby';

在 gatsby-plugin-ts-loader 存储库中似乎存在一个关于它的问题：https://github.com/AdamLeBlanc/gatsby-plugin-ts-loader/issues/1#issuecomment-453876850

【讨论】：