Gatsby i18next plugin No codeFrame could be generated

Question

I'm developing a website with Gatsby and I wanted to implement multi-language support. So I used the gatsby-plugin-react-i18next plugin. I followed all the steps, but it doesn't work, once I log into my website this error message shows: error message

Right now, my code is the next one.

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
        }
      }
    }
  }
`;

And of course I have the translation folders project structure

Im trying this plugin on a new blank project, not on my main project, so I don't understand why the plugin fails.

Any thoughts? Thanks in advice!

Edit: I add the translation.json of the two languages

English Spanish

Answer 1

Your JSONs looks and the implementation too (couldn't be wrong being that simple). So to me, the issue relies on the configuration. Try something simpler such as:

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