React-google-login: SSR

[rlancer]

Love the new updates, but it broke SSR in NextJS

Here is the error

window is not defined
ReferenceError: window is not defined
    at Object.<anonymous> (/usr/src/app/node_modules/react-google-login/dist/google-login.js:1:250)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.react-google-login (/usr/src/app/.next/server/static/development/pages/webpack:/external "react-google-login":1:1)
    at __webpack_require__ (/usr/src/app/.next/server/static/development/pages/webpack:/webpack/bootstrap:21:1)
    at Module../pages/index.tsx (/usr/src/app/.next/server/static/development/pages/index.js:238:76)
    at __webpack_require__ (/usr/src/app/.next/server/static/development/pages/webpack:/webpack/bootstrap:21:1)
    at Object.4 (/usr/src/app/.next/server/static/development/pages/index.js:416:18)
    at __webpack_require__ (/usr/src/app/.next/server/static/development/pages/webpack:/webpack/bootstrap:21:1)
    at /usr/src/app/.next/server/static/development/pages/webpack:/webpack/bootstrap:89:1
    at Object.<anonymous> (/usr/src/app/.next/server/static/development/pages/index.js:94:10)

[anotheri]

same here,
@rlancer do you have any workarounds in mind?

[anotheri]

Here is a workaround i use.

Instead of:

import { GoogleLogin } from 'react-google-login';

use:

// NOTE: workaround we have to use b/c of some SSR problems
const { GoogleLogin } = typeof window === 'object' ? require('react-google-login') : {};

[rigobertoGomez]

Hello! I am using this component with Next js and I found this problem and this solution helped me to solve it, but it always returns other errors like this one:

Warning: React.createElement: type is invalid - expected to string (for built-in components) or a class / function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[usmanp24]

Hello! I am using this component with Next js and I found this problem and this solution helped me to solve it, but it always returns other errors like this one:

Warning: React.createElement: type is invalid - expected to string (for built-in components) or a class / function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Hi, I have solved this by altering code like this:

import React, {Component} from 'react;
let GoogleLib;
export default class App extends Component {
    constructor () {
        super();
        this.state = { showGoogleBtn: false };
    }
    componentDidMount() {
        GoogleLib = require('react-google-login');
        this.setState({ showGoogleBtn: true });

    }

    render() {
        return (
                    {this.state.showGoogleBtn ?
                        <GoogleLib.GoogleLogin
                            clientId="CLIENT_ID"
                            buttonText="Login"
                            onSuccess={googleLoginSucess}
                            onFailure={googleLoginFail}
                        /> : null
                    }
        );
    }
}

This way only clientside will render the google button.

[kingr]

@anotheri solution makes the error go away when compiling webpack, but when the page loads and render React throws a new error below. So I'm looking alternative solutions for 0Auth with Google for now.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method ofSignin.

This will need a permanent fix going forward.

[usmanp24]

@anotheri solution makes the error go away when compiling webpack, but when the page loads and render React throws a new error below. So I'm looking alternative solutions for 0Auth with Google for now.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method ofSignin.

This will need a permanent fix going forward.

Hi, have u tried my workaround?

[anotheri]

@kingr i do not use Next.js and do not have such error, so I can't really help with solving that atm. But it's probably worth to try solution @usmanp24 added above.

[kingr]

@anotheri solution makes the error go away when compiling webpack, but when the page loads and render React throws a new error below. So I'm looking alternative solutions for 0Auth with Google for now.
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method ofSignin.
This will need a permanent fix going forward.

Hi, have u tried my workaround?

Hi, tried your solution. The same error persists.