Web3 not connecting with ropsten through infura

Question

so my truffle based application is communicating fine with my smart contracts on my private network, ganache and ganache-cli.

I then deployed it to ropsten where i used the endpoint i got from infura.io as my api-key

Now if i use that same api-key(endpoint) as my httpProvider, everything stops working but if i turn on metamask, it starts working again so i figured it's most likely my connection with ropsten that went wrong.

Here's my script for connecting to ropsten:

import Vue from 'vue'
import App from './App'
import Web3 from 'web3'
import router from './router'

Vue.config.productionTip = false

window.addEventListener('load', function () {
  if (typeof web3 !== 'undefined') {
    console.log('Web3 injected browser: OK.')
    window.web3 = new Web3(window.web3.currentProvider)
  } else {
    console.log('Web3 injected browser: Fail. You should consider trying MetaMask.')
    // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
    window.web3 = new Web3(new Web3.providers.HttpProvider('https://ropsten.infura.io/v3/<My-API-Key>'));
  }
  console.log(window.web3.eth.accounts) // returns an empty array, but it's meant to contain the address in that wallet
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
  })
})

Please help me figure out what i'm doing wrong that's making my connection to ropsten not work.

Truffle - 5.0.4

Node - 10.15.0

Web3 - 0.20.6

Windows 10

Answer 1

Apparently, it was my version of web3 that was the problem. Updating it to 1.0.0-beta.4.6 made my connection to infura work.

I ran into other issues before web3 got installed and i feel it necessary to share in case someone else runs into this issue

I ran npm install -g node-gyp to install node-gyp globally

Then i had to run npm install -g [email protected] as that was the most stable version at the point of writing this. I restarted my pc at this point.

Then i ran npm install nan in my project directoyu as it is a dependency of one of the package called scrypt which web3 tries to install as well.

Then i installed scrypt separately

Then i ran npm install web3 again to install web3

Going forward, connection to infura was now true but web3.eth.accounts was not returning the addresses in my network.

After some more research, i came across web3-hdwallet-provider and it made it possible for me to access my addresses again.

I hope this helps save time for someone out there.