3nvi / gatsby-intl Goto Github PK

With gatsby-theme-intl, in package.json, you have a dependency on "react-helmet": "^5.2.1".

Because of this, I get the following warning on the browser console:

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.
• Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: SideEffect(NullComponent)

To avoid this problem, we should update to react-helmet 6.1 or higher.

i just installed the plugin (theme-intl) , added this configuration :
{ resolve:@3nvi/gatsby-theme-intl, options: { supportedLanguages: ['en', 'fr'], i18nextConfig: { resources: {"en": { "translation":{ "de" : {"greeting": 'hello'}}}}, "fr": { "translation":{ "de" : { "greeting": 'bonjour'}}}}, }, },

and imported useTranslation in a component to test and it seems like something missing as i tried {t("de")} and {t("de.greeting")} and just get de.greeting , but when i delete the de object and add only greeting , it works , how to make it works as i want to make all my pages in one json

I'm unable to get the gatsby-offline plugin to cache any pages when using gatsby-theme-intl. The build process generates the following warning:

warn One of the glob patterns doesn't match any files. Please remove or fix the following: {
  "globDirectory": "public",
  "globPattern": "offline-plugin-app-shell-fallback/index.html",
  "globIgnores": [
    "**/workbox-v4.3.1/*.+(js|mjs)*",
    "**/node_modules/**/*",
    "**/sw.js"
  ]
}
info Generated public/sw.js, which will precache 0 files, totaling 0 bytes.

This is a great starter but as it stands the work added to the gatsby-starter-default is unclear from a licensing perspective given no copyright notice was added by the author. Please add a copyright notice. For more information see: https://writing.kemitchell.com/2016/09/21/MIT-License-Line-by-Line.html. If you're unsure how to add a notice let me know and I'll help.

Related: gatsbyjs/gatsby#25091

The starter project does not work with build. (The language pages are generated, but the redirection pages are not. So you can access "site.com/en", but you can't access "site.com/" and then be redirected to "site.com/en".)

Although the project works fine with "npm run start" or "gatsby develop". Not sure why that is.

Steps to reproduce the problem:

git clone https://github.com/3nvi/gatsby-intl intl-site
cd intl-site/packages/gatsby-starter-intl
npm install
gatsby clean
gatsby build
gatsby serve 
chrome http://localhost:9000

Hi,

I was trying to instead of passing a <Layout> component to each page, pass it to wrapPageElement, thus this layout would be passed to all pages.

I was trying to do something like so.

In gatsby-ssr.js file I'd import my layout component import Layout from './src/components/layout and I'd then

export const wrapPageElement = ({ element, props }) => (<Layout {...props}>{element}</Layout>)

However in the header where I have the language selector, I get an error cannot read map of undefined and this is because supportedLanguages is undefined.

I don't understand why this is happening. Does it has to do with how the theme is implemented? And if I try to wrap the page element at the moment of doing so, usePageContext hasn't been initialized yet?

Do you have any suggestion on how I could solve this problem?

Thank you

Hi Anggelo. Me again. Sorry for opening so many issues. I want to make one more suggestion after surfing through your quite comprehensive and very useful related blog post.

When visiting a website with Internationalizaton it would be preferable for a default language to not redirect URLs. This is as a UX thing and if you ever copied a Wikipedia link then chopped off the en subdomain before sharing it you know what I'm talking about. So basically what I'm proposing is that, if a default language is specified (e.g. Greek), the site would serve up Greek by default and not at the /el/ path.

It's okay if the explicit route and duplicate pages exist so long as rel=canonical is used. Please note I'm relatively new to Gatsby so I'm not sure if there are any technical limitations of what I'm proposting here. But maybe you know?

Hi @3nvi,

I'm getting these errors in the console: Cannot update a component ('IndexPage') while rendering a different component ('PageRenderer'). To locate the bad setState() call inside 'PageRenderer',
The route "/" matches both a page and a redirect; this is probably not intentional.

For the first error, could it be happening because how gatsby-theme-intl is providing context? According to this article: https://markoskon.com/wrap-root-element-vs-wrap-page-element/, it says that we can use wrapPageElement for everything but wrapPageElement should be used for providers that require router props and wrapRootElement for any other provider, like theme and global state providers.

Could this error be happening because where we are wrapping page element that rerenders every time while wrapRootElement only renders once?

When I clone gatsby-starter-intl, both these errors are present.

The problem with this error: The route "/" matches both a page and a redirect; this is probably not intentional., could it be that we are not removing the trailing slash? In Gatsby's example for i18n here: https://github.com/gatsbyjs/gatsby/blob/master/examples/using-i18n/gatsby-node.js they are removing the trailing slash.

SEO is very personal and should be handled in userland. If anything, please provide a disable option in the plugin and instructions for userland integration into sites' own SEO components.

This is what your project is built to do:
http://asdf.com/page : activates some SSR code that rewrites the url to the right language
http://asdf.com/en/page : The page in English
http://asdf.com/fr/page : The page in French

But this is what my project requires:
http://asdf.com/page : The page in English.
http://asdf.com/fr/page : The page in French
http://asdf.com/en/page : I don't need that page (but it's okay if an English page is returned)

French visitors will see the English page if they go directly to the default homepage. This is by design: they will have to click on a link to get to the French version. (If they go through a search engine, chances are that the French page /fr/page will be the page recommended.)

Using the deleteOriginalPages: false configuration, I mostly got what I needed. Thank you! Yay!

But there are some issues. The biggest one is gatsby-plugin-intl. This project uses Helmet to create link alternate hrefLang elements that are using the "ssr". But there are some problems:

1. It's using the wrong links:

The Link elements that are generated are compatible with the SSR way of doing things.

<link rel="canonical" href="http://asdf.com/en/" >
<link rel="alternate" href="http://asdf.com/" hreflang="x-default" >
<link rel="alternate" href="http://asdf.com/en/" hreflang="en" >
<link rel="alternate" href="http://asdf.com/fr/" hreflang="fr" >
<meta property="og:locale" content="en" >

But this is what I'd need to have:

<link rel="canonical" href="http://asdf.com/" >
<link rel="alternate" href="http://asdf.com/" hreflang="en" >
<link rel="alternate" href="http://asdf.com/fr/" hreflang="fr" >
<meta property="og:locale" content="en" > 

a) I don't need a x-default language.
b) The default language doesn't need the /en/ routing

2. There's no way to specify the host in "no-ssr" scenarios.

gatsby-browser.js is wrapping gatsby-ssr.js. And the latter is using constants.js, which initializes the host name to localhost :8080 in "no SSR" scenarios. This is wrong. There should be a way to specify the host name in the gatsby-config file.

Take a look at the documentation for gatsby-plugin-robots-txt.

Using siteUrl works very well. (I was sure it didn't when I originally tried it. My bad!)

3. The links are not generated on first load

The links are not generated when I first get to the page. I need to follow a routing link first to generate the links in the Dom. This means that search engines won't get the headers.

Hi,

I've kickstarted a project with your Gatsby starter and as far as language handling does it works great.

However, I want to have a section for authenticated users and I'm following this article: https://www.gatsbyjs.org/docs/client-only-routes-and-user-authentication/

in gatsby-node.js I have this:

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  if (page.path.match(/^\/app/)) {
    page.matchPath = '/app/*'
    createPage(page)
  }
}

And if I go to http://localhost:8000/app I have indeed the app. However, I lose the ability to have languages. I'm wondering how I could handle multilingual in the app, something like this: http://localhost:8000/app/profile/en or http://localhost:8000/app/profile/fr?