Integrating web3 from Metamask ReferenceError window is not defined error

Question

I am facing some problem while integrating web3 from Metamask using React. The code I am using is as follows:

import Web3 from 'web3'

let web3;

window.addEventListener('load', function () {
    if (typeof window.web3 !== 'undefined') {        
        web3 = new Web3(window.web3.currentProvider);
    } else {
        // No web 3 provider
        console.log("Please install Metamask");
    }    
});

export default web3;

Getting the following error:

window is not defined
ReferenceError: window is not defined
    at Object../lib/getWeb3.js (lib/getWeb3.js:5:0)

Comments

looking for the answers.

---

Refer to this answer: https://www.edureka.co/community/24933/integrating-web3-from-metamask-in-react?show=#24934

Feel free to get back if it doesn't work :)

Answer 1

You can't use MetaMask on server-side because window is not defined on Server. A workaround for this is that you can connect to INFURA when you want to use web3 in your React component server-side or without MetaMask support.

Here's how you can use react-web3-provider component.

Add the Web3Provider to your root React component:

import Web3Provider from 'react-web3-provider';

ReactDOM.render(
    <Web3Provider
        defaultWeb3Provider="https://mainnet.infura.io/YOUR_API_KEY"
        loading="Loading..."
    >
        <App />
    </Web3Provider>
)

Then in the component where you want to use Web3:

import { withWeb3 } from 'react-web3-provider';

class MyComponent {
    render() {
        const { web3 } = this.props;

        web3.eth.getAccounts(console.log);

        // Version 1.0.0-beta.35
        return "Web3 version: {web3.version}";
    }
}

export default withWeb3(MyComponent);

Answer 2

Window is a browser thing. And because you are using this on the server-side, it won't work. You might want to use global to make it work. 

Comments

Global won't work because the intention of the code is to work on server-side.