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,300 points
looking for the answers.
Refer to this answer:

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';

        <App />

Then in the component where you want to use Web3:

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

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


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

export default withWeb3(MyComponent);
answered Oct 10, 2018 by Omkar
• 69,150 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,300 points
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,440 points
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,830 points
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
• 69,150 points
0 votes
1 answer