Gatsby i18next 插件无法生成 codeFrame

Question

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

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

盖茨比-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
        }
      }
    }
  }
`;

当然，我有翻译文件夹项目结构

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

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

编辑：我添加了两种语言的翻译。json

英语西班牙语

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,
    },
  },
},