Can't get cookies with js-cookie and react

Question

I'm using Nextjs and trying to make multi language application. Multi langugage working properly but when I'm trying get language code with cookie like 'en', getting error.

This way working;

initialLang = 'en';
setDefaultTranslations({en, fr});
setLanguage('en');

But when I'm trying to set initialLang with cookie not working.

This way not working

initialLang = Cookies.get('lang');
setDefaultTranslations({en, fr});
setLanguage(initialLang);

What is the output of `console.log(typeof Cookies.get('lang'));`? — sunknudsen, Aug 18 '19 at 22:31
When you reload the page, is `Cookies.get('lang');` still set? — sunknudsen, Aug 18 '19 at 22:35
Yes it's set. console.log output 'en' but not working in the function. — Walter.White, Aug 18 '19 at 22:38
Are you getting an error or something? And when you say "not working in the function," what do you mean exactly? — goto, Aug 18 '19 at 23:31
Yes i've got an error but it's not about cookies. It's return Lang string is not found. Because cookies not passing value setLanguage function. — Walter.White, Aug 18 '19 at 23:47

score 0 · Answer 1 · answered Aug 18 '19 at 22:56

To solve your problem you need to step back and understand the problem. The main problem about the cookie is you need to split your code to read&write cookie for server and client. js-cookie works for only client-side. Basically, it works on the client because it works with document.cookie. When it calls document in next.js SSR, the backend code is not able to read the document because it does not exist. If you would like to read cookie in SSR you need to catch it from expressjs request and pass into react state. I would recommend you to use https://github.com/andreizanik/cookies-next which already solves this problem (implementation)

score -1 · Answer 2 · answered Aug 18 '19 at 22:32

-1

Probably, you're not using them in componentDidMount hook:

componentDidMount() {
  // get cookie
  // set state to update the language
}

answered Aug 18 '19 at 22:32

Bhojendra Rauniyar

83,432
35
168
231

I'm tried but still getting error. Error is 'lang is not selected'. – Walter.White Aug 18 '19 at 22:40
You'll need to initialize and update the state instead of some variable. – Bhojendra Rauniyar Aug 18 '19 at 22:40
I'm trying this and different methods but not working. Really amazing... – Walter.White Aug 18 '19 at 22:53

Can't get cookies with js-cookie and react

2 Answers2