Missing the cookie header or object

[davidsonsns]

I am using universal-cookie and am experiencing this problem when instantiating it. I'm doing the same thing as the example:

import Cookies from 'universal-cookie';
const cookies = new Cookies();

[garythung]

Running into this issue as well. universal-cookie seems to think I'm using this on the server side but it's on client side.

[davidsonsns]

I returned to the version I was using the longest, "react-cookie": "^ 0.4.8"

[eXon]

With what bundler are you using this library? It seems like it is mistakingly thinking you are in a Node.js environment.

[garythung]

I'm using Webpack with React and universal routing, which I think is the problem. Should I be using react-cookie instead?

For the client side, I'm trying to write a helper module that will access cookies. This helper will be used in my React components.

[eXon]

If you care about async server-rendering you should definitively use react-cookie instead. However, universal-cookie should be working on Webpack. I'll take a look.

[Brantron]

Currently having this issue when running tests as well.

[eXon]

@Brantron when testing, you might want to mock your cookies and passing it to the Cookies constructor. But yea I kinda agree it should not block you from not donig so in Node.js. I'm trying to look if removing this check has an impact on other parts.

[eXon]

@garythung @davidsonsns I've fixed this issue in v2.0.8. Can you confirm you no longer have this issue?

[andrefox333]

Using 2.0.8 and getting error: Error: Missing the cookie header or object.

Using universal-cookie with server side rendering and hot reload. I would comment out the code, refresh the page and it loads the page. I'll then uncomment the new Cookie() code and reload the page and it fully works after that...

[eXon]

@andrefox333 this is because you are doing server-rendering but you are not providing the cookie header or object to the library. Thus, the cookies will be empty even if the user have some. You need to provide them in some way using universal-cookie-express and react-cookie or using your own custom way.

Would you mind sharing your code or the portion dealing with cookies and SSR?

[garythung]

@eXon I appreciate the work you've put in. Unfortunately, I've moved from universal rendering to just client side, so the universal-cookie is working great for me and I can't help debug any universal rendering issues.

[kunokdev]

I came across this issue when using Next.js for server side rendering.

My solution was:
Instead of initializing object from class in global scope, I moved it to componentDidMount and this error was gone, hope it helps!

  componentDidMount(){
    const cookies = new Cookies()
    ...
  }

[tamal-appsbee]

Still facing the same issue. Any solution ?

[kunokdev]

@tamal-appsbee are you server side rendering? can u show your code where u get error?

[tamal-appsbee]

@kunokdev thanks for reply.
Yes I am using server side rendering.
I have a file name : cookie.js has following content

import Cookies from 'universal-cookie';
export const cookies = new Cookies();

In store using following:

import {cookies} from 'common/util/cookies';
....
const cookieData = cookies.get('name') || {};
  const store = createStore(
    RootReducer,
    cookieData,
    applyMiddleware(routemiddleware, sagaMiddleware)
  );

[kunokdev]

you are getting error at this line; export const cookies = new Cookies();
Since you are server side rendering, constructor of Cookies class gets broken because it excepts browser environment. Basically you need to make sure you call this constructor when it reaches client side. One way to do that is to put that logic inside componentDidMount, see comment above. Downside of this approach is that I had to initialize this object in more than just one place if I wanted to use it outside of componentDidMount.

[tamal-appsbee]

Ok,
Otherwise I shall use
const cookies = new Cookies(req.headers.cookie);
this way in express and can utilize current code ?

[kunokdev]

I haven't used this approach, to me it seems it would be used inside routers where req is available. As for React Components you should use cookie middleware to merge these scopes. I haven't succeed at that yet, so I use componentDidMount workaround.

[tamal-appsbee]

ok, Thanks

[Brantron]

Just to loop back, our solution was to just stub this object.

[andrefox333]

@Brantron can you provide a code example of what you described above?

[Brantron]

Sorry @andrefox333 ! That would certainly have been helpful. We wrapped our cookie usage in a helper object and just stubbed access like

sinon.stub(CookieHelpers, 'getUserStatus').returns({
    signedIn: true,
    mentor: true
  });
`

[mmoustai]

@eXon I am doing server side rendering and I would like to know if it's possible to get instance of the cookie object outside a component. I am getting the same errors as @andrefox333.

I have a single util function and I want to know if I need to give the cookie from the component as a new argument at every call or I might be able to access it as a "global".

[eXon]

@mmoustai You must pass the Cookies object as an argument. You cannot use a global variable otherwise you risk hijacking the cookies from another user.

[mahdieh-dev]

still having this issue. cookies.get() works as long as I haven't reloaded the page after setting cookie, but when I reload the page, it returns: undedined

[eXon]

@mshavandi Do you have a step by step or repo to reproduce the issue?