hupe1980 / gatsby-i18n

Gatsby plugin that provides i18n support

gatsby-i18n

Gatsby plugin that provides i18n support.

Packages

This repository is a monorepo managed with Lerna. Several packages are published to npm from the same codebase.

Starters

gatsby-starter-i18next

Demo Source

• i18next integration
• automatic browser-language detection and redirection
• language switcher
• hreflang
• ...

gatsby-starter-lingui

Demo Source

• lingui integration
• automatic browser-language detection and redirection
• language switcher
• hreflang
• ...

License

MIT

gatsby-i18n's Issues

Error: RelayParser: Encountered duplicate defintitions for one or more documents: each document must have a unique name.

There was an error in your GraphQL query:

@error: RelayParser: Encountered duplicate defintitions for one or more documents: each document must have a unique name.

lingui: default locales aren't working on build

for some reason, the fallback locales aren't working on build, but work perfectly on dev.

for this demonstration:

1. there's 2 languages: en & pt
2. the default langugage is en
3. there are messages: title & paragraph
4. the title is present on both, the title is missing on pt

it should render the message in english, but it renders the message id

| |
|
| --- | --- |
| ✅dev | ⚠️build |

link to repo

link to production

plugin not working if used in combination with gatsby-plugin-layout

hey,

i'm using the gatsby-plugin-layout plugin and facing some issues...
it seems that with this setup the initial locale-data are not getting passed to the i18n setup.

i'm wrapping the centralized "layout" component with the useI18next()(Layout) HOC

usually to make your plugin work i have to pass a data-object from a page-query for every page that want's to use your plugin but in this scenario i wanted to have only the "layout" component be wrapped with the HOC and provides down the i18n instance because the page will not be reloaded at navigation.

i managed this by adding the initial page data for the "layout" component in the gatsby-node.js with the onCreatePage function.

your plugin is looking for the locales props.data-object of the graphql page-query result but with my workaround there is only the props.pageContext object available to pass the locales data to the component.

would it make sense to check props.data and props.pageContext for the locales object?

or do you see any other way to come around this?

thanks in advance
mike

setup:

Gatsby 2
gatsby-plugin-layout
@wapps/gatsby-plugin-i18next

Lingui with catalog format "po" not working

Got Lingui running with gatsby-plugin-lingui but only with format: 'minimal'. If I use format "po" as recommended by Lingui I get exceptions when starting gatsby.

ERROR #11321  PLUGIN

"@wapps/gatsby-plugin-lingui" threw an error while running the onCreateNode lifecycle:

Unexpected token m in JSON at position 0



  SyntaxError: Unexpected token m in JSON at position 0
  
  - JSON.parse
  
  - onCreateNode.js:72 _callee$
    [gcb-shop]/[@wapps]/gatsby-i18n/lib/plugin/onCreateNode.js:72:40
  

Reproduce:

1. Clone https://github.com/philschonholzer/gatsby-lingui
2. Change format in lingui.config.js to "po"
3. Delete locale folder
4. npm run add-locale en de
5. npm run extract
6. npm start

Missing files in gatsby-i18next node_modules folder

Hi @hupe1980 , I want to use your plugin for one project I'm working on. But I'm unable to do so. When I type npm start I always get errors like this during startup: Error: Cannot find module './lib/plugin' and once localhost starts I get error:

These relative modules were not found:

* ./Head in ./node_modules/@wapps/gatsby-i18n/lib/index.js
* ./I18nContext in ./node_modules/@wapps/gatsby-i18n/lib/index.js
* ./Language in ./node_modules/@wapps/gatsby-i18n/lib/index.js
* ./Link in ./node_modules/@wapps/gatsby-i18n/lib/index.js
* ./Redirect in ./node_modules/@wapps/gatsby-i18n/lib/index.js

I have checked content of node_modules folder of gatsby-i18next and there files are indeed missing. Is there some bug in released package or I'm doing something wrong. I couldn't find any relevant info on this.

Thanks for help.

use 'language' instead of 'lng'

just a suggestion, i think it makes things clearer, and helps keeping standard names 😅

i've been playing with lingui, and i can tell that's a pretty nice plugin 🎉,
it really cut dev time and prevents juggling with gatsby/lingui internals.

i can PR this if you are interested.

SyntaxError: Unexpected token when run extract command

Hi.

When I run lingui extract or npm run extract from root dir of the project, I get this error:

SyntaxError: ~/www/gatsby-i18n/starters/gatsby-starter-lingui/src/components/header.js: 
Unexpected token (7:2)

   5 | 
   6 | const Header = ({ siteTitle }) => (
>  7 |   <div
     |   ^
   8 |     style={{

Please halp to solve this issue, Thanks.

Cannot add JSON files with nesting

Currently loading a locale file with a nested JSON structure does not work. I've created a pull request to fix that here.

@hupe1980 is this okay to merge?

gatsby-starter-i18next is not working

Is there any working with gatsby 2 example/starter?

How to translate component's props in this example?

Hi, I have page:

import { Trans } from "@lingui/react"
import { Link, withLingui } from "@wapps/gatsby-plugin-lingui"
import { graphql } from "gatsby"
import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"

const SecondPage = () => (
  <Layout>
    <SEO title="Page two" />
    <h1><Trans>Hi from the second page</Trans></h1>
    <p><Trans>Welcome to page 2</Trans></p>
    <Link to="/"><Trans>Go back to the homepage</Trans></Link>
  </Layout>
)

export default withLingui()(SecondPage);

export const query = graphql`
  query($lng: String!) {
    locales: allLocale(filter: { lng: { eq: $lng }, ns: { eq: "messages" } }) {
      ...LocaleFragment
    }
  }
`;

What I mast to write to translate title props "Page two":

<SEO title="Page two" />

Thanks

Add Backend (i18next-xhr-backend) to my gatsby project

Hi, im currently using the plugin with no problem on develop, but when i try to build it i got the messages "i18next::backendConnector: No backend was added via i18next.use. Will not load resources." i tried to add it on a few places with no luck, any one can help me with this issue? thanks in advance.

Cannot query field "allLocale" on type "Query".

I setup a new Gatsby page and tried to add lingui to it. Sadly whatever I did I could not get allLocale to appear as query and therefore Gatsby could not start.

ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "allLocale" on type "Query".

If you don't expect "allLocale" to exist on the type "Query" it is most likely a typo.
However, if you expect "allLocale" to exist there are a couple of solutions to common problems:

Here is the Gatsby page source: https://github.com/philschonholzer/gatsby-lingui

i18n-next or lingui?

What are the pros and cons of either service, as you are supporting both?