React-i18next: JSON.Parse error: parsing "foo" on StorageEvent "i18next.translate.boo"

[najibghadri]

Hello! I have been using i18next react for a short time and this started a while ago. I checked all of my translations files, they are all valid, no typos, and it strongly seems unrelated from my code.

What happens:
For the record I have no idea what causes this, but it does not fire when I change the language, it happens on other events related to my code but IMO unrelated to i18next.

The verbose error context is below. My guess this is a health check for i18n and it puts a bad json, specificall the string "foo" on a storage event keyed "i18next.translate.boo". Again no idea what is up, but it is annoying on deveolpent debugging and it spams the console with error logs.

So it is related to localStorage persistence

[najibghadri]

I think I managed to find out what is _also_ causing this, roughly. It also happens when a Storage event is fired due to change in languaage another tab. I change language to "en" with changeLanguage, then on the other tab the same error in the same place as above fires but newValue is "en". So as I assumed earlier it might easily be a health check function, but there if there is a loopback with the event it goes into a JSON parse for whatever reason. That is the root of the problme IMO. For now I can not solve this, not with debug true option either

[adrai]

It’s probably i18next-browser-languageDetector: https://github.com/i18next/i18next-browser-languageDetector/blob/master/src/browserLookups/localStorage.js#L4

Is your localstorage api broken?
Can you reproduce this in a codesandbox example?

[najibghadri]

I will try soon!

[najibghadri]

Not exactly closed but ok 😅

[jamuhl]

Sorry ... was too actively cleaning up our issues list...

[najibghadri]

It's okay. I did not forget it, will try to reproduce soon!

[jamuhl]

@najibghadri is this still relevant...keeping this endless open does not help solving it

[najibghadri]

Hello @jamuhl @adrai . I did try to reproduce it in a sandbox but I couldn't. As I said it is simple to reproduce on localhost: open two tabs of the same domain (can be localhost) and change the language in one of them. In the other one the following errors will be thrown.

I think it happens due to a localStorage listener and obviously erronous code.
There are other triggers for the error, it's in the same part of the code, but I could not find other, this is the most obvious.

For now I use this library in my website and these errors don't seem to affect the site. So it's your decision from here. Thanks!

[adrai]

As I said it is simple to reproduce on localhost: open two tabs of the same domain (can be localhost) and change the language in one of them. In the other one the following errors will be thrown.

Can you creat a reproducable example? Codesandbox or repository we could try with? Can’t reproduce this.

[jamuhl]

Looking at your error this looks not like an issue with i18next but more with some of your state hydration from use-persisted-state

there is technical nothing that is shared between tabs -> language is only detected once on load - not on change in other tab (there is no magic glue)

[najibghadri]

Okay, well, unfortunately I don't have time now to reproduce it, perhaps in the next two weeks, but as I said it doesn't break my site. BTW, if you are quriouos about the error, my site is https://quarantime.io/ 😄. The error shows there if you open two tabs with the same room.

Another option is, if you prefer, you close this and if I can reproduce it later with sandbox I will reopen it.

[adrai]

seems this happens already when you just open your site (without doing anything) in 2 different tabs:

Also this guy: https://github.com/donavon/use-dark-mode/issues/38 is having the same problem, without using i18next at all...
This is use-persisted-state listening to the localstorage events and always expecting to save a json... (strange behaviour, IMO)
https://github.com/donavon/use-persisted-state/issues/31
https://github.com/donavon/use-persisted-state/issues/16
=> better use: https://github.com/astoilkov/use-local-storage-state

will close as this is not related with i18next.

[najibghadri]

Wow, thanks a lot! :) Sorry. :(

[adrai]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.

There are many ways to help this project 🙏