Web is not injected by metamask

Question

'web3 is not defined' even though the metamask is installed and logged in with an address.This works in online editors like codepen and JSFiddle.Tried window.web3, and the result was same.But, window.Web3 is returning a function.What is the difference and Where am I wrong?

  window.addEventListener("load", function() {
    if (typeof web3 !== "undefined") {
      web3 = new Web3(web3.currentProvider);
      console.log("Pulling metamas as current provider");
      web3.eth.getAccounts(function(error, accounts) {
        if (!error) {
           getAccountBalance(accounts[0])
        } else {
           console.error(error);
        }
      });
    }else {
      console.log("No metamask ? Pulling kovan testnet as current provider");
      web3 = new Web3(new Web3.providers.HttpProvider("https://kovan.infura.io"));
    }
});

Answer 1

You need to do import the Web3 library, so use the following code:

const Web3 = require('web3')

Then you can use web3 = new Web3(...) normally.