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,350 points
6,544 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
• 69,210 points

selected May 6, 2019 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, 2019 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,350 points
2,231 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 aryya
• 7,450 points
535 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
1,663 views
0 votes
1 answer

Hyperledger Sawtooth vs Quorum in concurrency and speed Ask

Summary: Both should provide similar reliability of ...READ MORE

answered Sep 26, 2018 in IoT (Internet of Things) by Upasana
• 8,620 points
1,215 views
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
• 69,210 points
1,237 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP