#41: Server side rendering issues (closes #41)

[FrancescoCioria]

Closes #41

Test Plan

tests performed

• examples work without errors/warnings
• the cookie of the first examples "accepts-cookies" is correctly stored in the browser (verified with devtools)

tests not performed (domain coverage)

At times not everything can be tested, and writing what hasn't been tested is just as important as writing what has been tested.

An example of partial test is a field displaying 4 possible values. If 3 values are tested, with screenshots, and 1 is not, then it should be mentioned here.}

[adomrockie]

Looks good to me so far, will pull to local dev and test with our code.

[adomrockie]

Getting can't resolve error 'aws-sdk'. had to add new json-loader and for me as i was not using ts. I had to load ts into my webpack to get it to compile.

Still getting errors, will try and resolve but if anyone knows where I might be going wrong let me know.

To pull this branch to your working dev

use command below

npm install https://github.com/buildo/react-cookie-banner.git#41-server_side_rendering_issues --save

[giogonzo]

Hi @adomrockie, installing straight from github, npm will not "build" this package first. That's why it isn't working out of the box.

You'd need to clone this repository, checkout the correct branch, install the dependencies, and then, from your project, install the package locally using npm i path/to/react-cookie-banner

To simplify this, I've released a temporary version that you can install with npm i react-cookie-banner@universal. Let me know if this helps! :)

[giogonzo]

@adomrockie @FrancescoCioria tested myself on a server-rendered project, I can confirm the annoying warning is gone! Just added a missing re-export in the last commit

@adomrockie going to merge this and release in a few minutes

[nemobot]

[adomrockie]

Installs fine and works with no changes with current code base, I have two cookie cards ie BetaCard and CookieBannerCard components

The error I am now getting is

Call to Node module failed with error: TypeError: __WEBPACK_IMPORTED_MODULE_10_react_cookie_banner__.Cookies is not a constructor

[FrancescoCioria]

how are you importing Cookies in your code?

[radufarcas10]

Hi guys!

I was using react-cookie-banner@0.0.17 in a isomorphic app and was getting the checksum error from React that the code on the server doesn't match the one from client and after I updated to react-cookie-banner@3.0.0 and I'm getting this error:

In Promise Error TypeError: (0 , _reactCookieBanner.cookie) is not a function at new CookieBanner (/src/js/components/cookie-banner.js:15:16)

I'm importing the Cookies as explained in the updated docs. Any idea why I'm getting this?

[FrancescoCioria]

yes, from your error it looks like you're importing and using the function cookie, which is longer exported.

from 2.0.0+, you should import the class Cookies and use that one to manipulate cookies as described in the readme: https://github.com/buildo/react-cookie-banner#server-side-rendering-aka-universal.

[radufarcas10]

I'm actually importing the class Cookies like in the readme:

import React, { Component } from 'react';
import { Cookies, CookiesProvider, CookieBannerUniversal } from 'react-cookie-banner';

class CookieBanner extends Component {
  static displayName = 'cookie-banner';

 const cookies = new Cookies();

  constructor(props) {
    super(props);

    this.state = {
      visible: cookies.get('__imoac') !== 'true'
    };

    this.setHidden = this.setHidden.bind(this);
  }

  setHidden() {
    cookies.set('__imoac');
    this.setState({ visible: false });
  }

  render() {
    const { visible } = this.state;

    return (
      <CookiesProvider cookies={cookies}>
      <CookieBannerUniversal         
        className={`section-cookies ${visible ? '' : 'hide'}`}
        disableStyle={true}
        dismissOnScroll={false}
        onAccept={this.setHidden}
      />
      </CookiesProvider>
    );
  }
}

export default CookieBanner;

[FrancescoCioria]

In Promise Error TypeError: (0 , _reactCookieBanner.cookie) is not a function at new CookieBanner (/src/js/components/cookie-banner.js:15:16)

Here it's written clearly that, in your code, you're doing something like require(react-cookie-banner).cookie(...) inside the file /src/js/components/cookie-banner.js at the line 15 position 16.

Is it another file? or maybe something went wrong with the build... Did you correctly re-build you project after upgrading react-cookie-banner? I suggest you try with a clean install + build:

rm -rf node_modules
npm i
npm run build

[radufarcas10]

Yes, sorry, I forgot to re-build. But now, after re-build I'm getting an error saying that the cookies are not defined:

In Promise Error ReferenceError: cookies is not defined at new CookieBanner (/src/js/components/cookie-banner.js:20:16)

[FrancescoCioria]

@radufarcas10 simply read the error :)

In Promise Error ReferenceError: cookies is not defined at new CookieBanner (/src/js/components/cookie-banner.js:20:16)

The variable cookies inside /src/js/components/cookie-banner.js at the line 20 position 16 is not defined. Again, this is an error in your code, not in the library. In particular, by looking at the code you pasted previously, you should change your component like this:

class CookieBanner extends Component {
  static displayName = 'cookie-banner';
  cookies: new Cookies()

and then call it in your functions as this.cookies. the this is necessary.