Gatsby i18next 插件无法生成 codeFrame

Question

我正在用 Gatsby 开发一个网站，我想实现多语言支持。所以我使用了 gatsby-plugin-react-i18next 插件。我按照所有步骤操作，但它不起作用，一旦我登录到我的网站，就会显示此错误消息： error message

现在，我的代码是下一个。

盖茨比-config.js

 module.exports = {
  siteMetadata: {
    title: "Space",
  },
  plugins: [
    "gatsby-plugin-postcss",
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `locale`,
        path: `${__dirname}/locales`
      }
    },
    {
      resolve: `gatsby-plugin-react-i18next`,
      options: {
        localeJsonSourceName: `locale`, // name given to `gatsby-source-filesystem` plugin.
        languages: [`en`, `es`],
        defaultLanguage: `en`,
        // if you are using Helmet, you must include siteUrl, and make sure you add http:https
        siteUrl: `https://example.com/`,
        // you can pass any i18next options
        // pass following options to allow message content as a key
      },
      pages: [
        {
          matchPath: '/:lang?/blog/:uid',
          getLanguageFromPath: true,
          excludeLanguages: ['es']
        },
        {
          matchPath: '/preview',
          languages: ['en']
        }
      ]
    }
  ],
};

index.js

import * as React from "react"
import { graphql } from "gatsby"
import { useTranslation } from "gatsby-plugin-react-i18next"

export default function IndexPage() {
  const { t } = useTranslation();
  return (
    <h1>{t("Space")}</h1>
  )
}

export const query = graphql`
  query($language: String!) {
    locales: allLocale(filter: {language: {eq: $language}}) {
      edges {
        node {
          ns
          data
          language
        }
      }
    }
  }
`;

当然还有翻译文件夹project structure

我正在一个新的空白项目上试用这个插件，而不是在我的主项目上，所以我不明白为什么插件会失败。

有什么想法吗？谢谢指教！

编辑：我添加了两种语言的translation.json

English Spanish

Answer 1

您的 JSON 外观和实现也是如此（这么简单就不会错）。所以对我来说，问题取决于配置。尝试更简单的方法，例如：

{
  resolve: `gatsby-plugin-react-i18next`,
  options: {
    localeJsonSourceName: `locale`,
    path: `${__dirname}/locales`,
    languages: [`en`, `es`],
    defaultLanguage: `en`,
    i18nextOptions: {
      interpolation: {
        escapeValue: false, // not needed for react as it escapes by default
      },
      keySeparator: false,
      nsSeparator: false,
    },
  },
},

Gatsby i18next 插件无法生成 codeFrame

Gatsby i18next plugin No codeFrame could be generated

javascript

internationalization

i18next

reactjs

gatsby