Integrating web3 from Metamask: "ReferenceError: window is not defined" error

+1 vote

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)
Oct 10, 2018 in Blockchain by slayer
• 29,050 points
586 views
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 :)

2 answers to this question.

+2 votes
Best answer

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);
answered Oct 10, 2018 by Omkar
• 67,290 points

selected May 6 by slayer
–1 vote

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. 

answered May 6 by Karan
Global won't work because the intention of the code is to work on server-side.

Related Questions In Blockchain

0 votes
1 answer

Uncaught ReferenceError: web3 is not defined at window.onload

I think the onload is giving the issue. Try this ...READ MORE

answered Sep 28, 2018 in Blockchain by slayer
• 29,050 points
287 views
0 votes
1 answer

Is it possible to claim Bitcoin Cash from an exchange that does not support it?

You can't claim BCH without knowing private ...READ MORE

answered Jul 17, 2018 in Blockchain by ariaholic
• 7,340 points
33 views
0 votes
1 answer

Truffle tests not running after truffle init

This was a bug. They've fixed it. ...READ MORE

answered Sep 11, 2018 in Blockchain by Christine
• 15,790 points
126 views
0 votes
1 answer
0 votes
1 answer

Solidity geth: Error encountered during contract execution [Bad instruction]

recipes is a dynamic storage array. You need ...READ MORE

answered Oct 15, 2018 in Blockchain by Omkar
• 67,290 points
66 views
0 votes
1 answer