Gatsby: An external Javascript library does not work properly

[LouisBertin]

Summary

Hi there,

I'm trying to use GatsbyJS with Weglot which is a JavaScript library to fully translate a website with no effort. The only thing to setup is a CNAME record and a piece (3 lines) of JavaScript.
Everything works pretty well except the last step.. the demo server is located at this URL (hosted with Netlify) : https://www.multilingual-gatsby.com/

As you can see on the link above, if you click on the French flag on the bottom right, the site content switch to french.. and after the full page load.. it revert to english.

Relevant information

• What I've done to setup Weglot :

I have read documentation page about the customization of html.js : https://www.gatsbyjs.org/docs/custom-html/ and I put these lines in my html.js :

 <script
type="text/javascript"
src="https://cdn.weglot.com/weglot.min.js"
></script>
<script src={withPrefix("script.js")} type="text/javascript" />

The script.js is a file I have created in static/script.js and it contains :

Weglot.initialize({
    api_key: 'MY_API_KEY'
})

I also have read on this page : https://www.gatsbyjs.org/docs/ssr-apis/ that Gatsy does a two-pass render.. maybe it explains it works at the beginning and the content is replaced at the end.. but I don't know if there is a workaround.

That's could be great, Weglot could be complementary for the Gatsby ecosystem. Here's my repository if it can help : https://github.com/LouisBertin/weglot-gatsby

Environment (if relevant)

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Languages:
    Python: 2.7.17 - /usr/local/bin/python
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 77.0.1
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.20.35 => 2.23.11
    gatsby-image: ^2.3.5 => 2.4.9
    gatsby-plugin-netlify: ^2.2.4 => 2.3.7
    gatsby-plugin-netlify-cms: ^4.2.5 => 4.3.7
    gatsby-plugin-purgecss: ^5.0.0 => 5.0.0
    gatsby-plugin-react-helmet: ^3.2.5 => 3.3.6
    gatsby-plugin-sass: ^2.2.4 => 2.3.6
    gatsby-plugin-sharp: ^2.5.7 => 2.6.14
    gatsby-remark-copy-linked-files: ^2.2.4 => 2.3.7
    gatsby-remark-images: ^3.2.6 => 3.3.13
    gatsby-remark-relative-images: ^0.3.0 => 0.3.0
    gatsby-source-filesystem: ^2.2.5 => 2.3.14
    gatsby-source-strapi: 0.0.12 => 0.0.12
    gatsby-transformer-remark: ^2.7.5 => 2.8.19
    gatsby-transformer-sharp: ^2.4.7 => 2.5.7
  npmGlobalPackages:
    gatsby-cli: 2.12.51

File contents (if changed)

gatsby-config.js: Plugins list :

gatsby-plugin-react-helmet,
gatsby-plugin-sass,
gatsby-plugin-sharp,
gatsby-transformer-sharp,
gatsby-plugin-purgecss,
gatsby-source-strapi,
gatsby-plugin-netlify

package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[pieh]

I can't help in regards to Weglot because I'm not familiar with it - but found this random "review" - https://www.trustpilot.com/users/5ee1071363833f2cd9084dac which seems to mean that it's doable, but integration might be more involved then just calling Weglot.initialize with your api key

Did you try to reach out to Weglot support as well? I think that if this is client-only solution, then setup that works for "server rendered and hydrated" react apps should work for Gatsby and even if they don't have Gatsby specific instructions - they might have some for React generally?

[LouisBertin]

Thank you for the answer.

On this review, the person talks about "Javascript integration" which involves to click on a language button on each page to see the translation. That's why I choose the CDN integration because everything is automated and it creates the french version of my website on a subdomain : https://fr.multilingual-gatsby.com/

If you check the source code : view-source:https://fr.multilingual-gatsby.com/, all the text is in french. It seems there is a Gatsby's javascript file who re-render all the text when the DOM is fully loaded.. is there a way to avoid this behavior ?

[necheporenko]

I tried to load the scripts in gatsby-ssr.js, but that did not help too.

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script src="https://cdn.weglot.com/weglot.min.js" type="text/javascript" />,
    <script
      dangerouslySetInnerHTML={{
        __html: `Weglot.initialize({
          api_key: "API_KEY"
      });`,
      }}
    />,
  ]);
};

[necheporenko]

Hello @weglot and @nico2che,
Do you have instructions for using your service in React (Gatsby)?
Or maybe you can help us with this issue.

[LouisBertin]

Hi @necheporenko, thanks for your answer.

Do you think there is no workaround to re-run the Weglot script each time Gatsby regenerate the DOM content ?

[necheporenko]

Hi @LouisBertin,
I've found the reason for this issue, to fix this, you should add this id #___gatsby in the settings of your Weglot admin panel.

[LouisBertin]

Oh, wow great! Thanks @necheporenko I'll test it in the next few days 😉

[LouisBertin]

Hi @necheporenko, I tested your solution above on the following url : https://fr.multilingual-gatsby.com/
It works well.. but sometimes it doesn't and I don't know why.
Have you encounter the same issue?

Here is my Weglot dashboard :

[necheporenko]

@LouisBertin, I haven't encountered your issue.

[nico2che]

Hi @LouisBertin

Gatsby is fast, and Weglot's first job is to be as fast as Gatsby

The Weglot subdomain integration will translate static HTML documents, which is good for SEO, but Gatsby hydrates page and untranslated data is overriding this static content to be really fast on future navigation

The problem is Weglot's dynamic option works well with elements which will be displayed after page was loaded (at least dozens of ms), not when page is loading because Weglot is not initialized and can't detect these elements.

We do have several solutions, and the better one is to translate data before hydration! It needs to add custom detection rules, but at the moment you can't add them by yourself yet

I'll add these rules for you now, let me check this

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[pvdz]

Looking through the thread I think the original issue has been resolved. I'm closing this but feel free to continue the discussion if you want to :)

[snimmagadda1]

@LouisBertin did those rules ever work out? I tested with the url https://fr.multilingual-gatsby.com/ and not seeing it translate on my end. I'm currently trying to translate a Gatsby site and have run into the re-render issue when I stumbled on this thread.

[LouisBertin]

@snimmagadda1 unfortunately not.. But I'm thinking that the Weglot team working on it and it will be available in the futur.

For the moment, I've used Hugo instead of Gatsby or if you want I've written a serie of blog posts about multilingual with Gatsby : https://dev.to/louisbertin/multilangual-website-with-gatsby-and-contentful-part-1-57ag