Gatsby fixing errors, simple multilingual page

kengreg — Fri, 03 Sep 2021 06:07:19 +0000

This is a blog of tricks, hacks, or how I fix different things during my work.
Today I am making a gatsby website (the second) and I found some weird things to fix. I am not so good and beginner with ReactJs so I try my best and if possible only use CSS.

Problem 1


TypeError: lunr.TinySegmenter is not a constructor

This errors happens when using the lunr.js while trying to add another language. I dont know exactly why it says that it can be multiple languages but actually it doesnt search for words in japanese even when I added the follow

languages: [
          {
            name: 'en',
            filterNodes: (node) => !node.frontmatter || node.frontmatter.draft !== true,
            customEntries: [
              {
                title: 'Another Page',
                content: 'Welcome to page 2',
                path: '/another-page/',
              },
            ],
          },
          {
            name: 'jp',
            filterNodes: (node) => !node.frontmatter || node.frontmatter.draft !== true,
          },
        ],

I found a way to fix the error editing the plugin itself. thanks to Shigeru-Sakurai

just add the follow line above the segmenter in the lunr.ja.js file at node_modules/lunr-languages/lunr.ja.js

require('./tinyseg.js')(lunr) // + add
var segmenter = new lunr.TinySegmenter() //

Problem 2

I cant use the "navigator" inside of gatsby. In order to get the language from the browser I needed to use the navigator from the window to get the user browser default. In this way, I could add in the helmet the lang attr and using CSS switch the content between 2 different languages. I really wanted to use javascript but its complicated to import libraries or add your own code without crashing the templates (actually you really need to know what are you doing).

In my case I just preferred to make it simple and switch the language using the Input:checked + label + div in CSS

However if you use the navigator , during the build , Gatsby will give you and error. To fix this, I added the plugin browser-monads
It allows you to get the windows only when necessary. In the example or tutorial didnt have any example of how to use it in each case...so...as always I had to "guess" what to do.
In this case following the example of the plugin I just added the window to the navigator:

import { window, document, exists } from 'browser-monads'

let navigatorLang =
  window.navigator && window.navigator.language && window.navigator.language.split('-')[0]

Using this I could get the language and decide which prefix to put in the Lang attr:

let htmlLang = navigatorLang == `en` ? 'en' : 'ja'

Then use it in the template.tsx

<SEO
        lang={htmlLang}
        title={`${frontmatter.title}`}
        description={''}
/>

so finally I could use a CSS with an input to display or not a content (both content need to be below, NEXT to the input/label)

html[lang='en'] {
    .ja {
      display: none;
    }



.switch-en {
  &[type='checkbox']:checked + label + .en + .ja,
  &[type='checkbox']:checked + label:nth-of-type(n) + .en + .ja {

    /* show children when item is checked */
    display: block !important;
  }
  &[type='checkbox']:checked + label + .en,
  &[type='checkbox']:checked + label:nth-of-type(n) + .en {

    /* show children when item is checked */
    display: none !important;
  }
}

Yes, a simple tricky way to have a multi language page without using plugins or the hard coding that you must do to make modifications in gatsby/react js.

DEV Community: kengreg

Gatsby fixing errors, simple multilingual page

Problem 1

Problem 2