Gatsby i18next 插件无法生成 codeFrame答案

【问题标题】：Gatsby i18next plugin No codeFrame could be generatedGatsby i18next 插件无法生成 codeFrame
【发布时间】：2021-05-09 19:26:58
【问题描述】：

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

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

gatsby-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

【问题讨论】：

你能分享你的翻译 jsons 吗？
@FerranBuireu 是的，当然，我添加到帖子中

标签： javascript reactjs internationalization gatsby i18next

【解决方案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,
    },
  },
},

【讨论】：