myFunction.call() not working with MetaMask

Question

I can't seem to figure out why the function symbol() isn't working. I've made sure that MetaMask is on the right network (main net). I tried console.logging the myContract.methods... line and seem to get an error, but can't seem to figure out what it means.

$( document ).ready(function() {

  var myContract;

  function startApp() {
     myContract = new web3.eth.Contract(crowdsaleABI, 
     "0x618E75Ac90b12c6049Ba3b27f5d5F8651b0037F6")
  };

  // Checking if Web3 has been injected by the browser (Mist/MetaMask)
  if (typeof web3 !== 'undefined') {
     // Use Mist/MetaMask's provider
     web3 = new Web3(web3.currentProvider);
     document.write("You are connected to MetaMask");
  } else {
     // Handle the case where the user doesn't have web3.
     document.write("You are not connected to MetaMask");
     web3 = new Web3(new 
     Web3.providers.HttpProvider("HTTP://127.0.0.1:7545"));
  }
  // Now you can start your app & access web3js freely:
  startApp();

  myContract.methods.symbol().call().then((result) => 
  {console.log(result)});

  });

  /*ERROR DETAILS:
  "Error
  at A.R [as _captureStackTrace] 
  (http://localhost:3000/src/js/web3.min.js:1:350318)
  at A._then (http://localhost:3000/src/js/web3.min.js:1:373974)
  at A.then (http://localhost:3000/src/js/web3.min.js:1:372344)
  at HTMLDocument.<anonymous> 
  (http://localhost:3000/src/js/app.js:22:50)
  at i (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:27449)
  at Object.fireWith [as resolveWith] (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:28213)
  at Function.ready (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:30006)
  at HTMLDocument.K (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:30368)"*/

EDIT: I also tried replacing web3.currentProvider with an Infura API to the main net and it actually worked. So it seems to be something with MetaMask, but I still can't seem to figure out what exactly.

Answer 1

It looks like using document.write is the problem. Switching to console.log in your repro fixes the problem for me.

I don't know why that causes a problem, but it's probably not worth spending too much time on. (document.write is considered a bad practice these days.)

EDIT

I should add that I saw different behavior from you. For me, the Promise never resolved one way or the other. (then and catch handlers didn't get called at all.) Removing the document.write calls resolved this for me.