Transferring an ERC-20 using web3js 1.0.0

I have been trying to follow the web3js documentation, but it mentions things that are not native to Javascript like “Buffer” so I found a library called ethereumjs-tx to let me use that.

• My HTML page to test it on has scripts to import web3js-1.0.0 and browser-ethereumjs-tx.js

• I am using Infura as my web3 provider

Here is my function, with addresses and private keys stripped for safety:

async function transferTokens(){
    // example: https://ethereum.stackexchange.com/questions/24828/how-to-send-erc20-token-using-web3-api

    // the ABI of the erc20
    var abi;

    // the token address for the specific token 
    var tokenAddr;

    // instantiate the token contract using the ABI and the Contract Address.
    var tokenContract = new web3.eth.Contract(abi, tokenAddr);

    // who has the tokens to be sent? 
    var sender;

    // where are the tokens being sent?
    var tokenRecipient = document.getElementById('tokenRecipient').value;

    // how many tokens are being sent?
    var tokenAmount;

    // nonce
    var count = web3.eth.getTransactionCount(sender);

    //set a gas price for the transfer in GWei (I picked 30 arbitrarily).
    var gasPriceGwei = 30;

    var gasLimit = 400000; // arbitrary, I know it's higher than needed

    //Creating a raw Tx...
    var rawTransaction = {
        "from": sender,
        "nonce": "0x" + count.toString(16), 
        "gasPrice": gasPriceGwei,
        "gasLimit": gasLimit,
        "to": tokenRecipient,
        "value": "0x0",
        "data": tokenContract.methods.transfer(tokenRecipient, tokenAmount).encodeABI(), // not sure wtf
        "chainId": 0x04 //rinkeby network
    };

    // EthJS allows us a buffer function.
    var privKey = new EthJS.Buffer.Buffer('[my_privKey]', 'hex');

    var tx = new EthJS.Tx(rawTransaction); 
    tx.sign(privKey);
    var serializedTx = tx.serialize();

    // Comment out these three lines if you don't really want to send the TX right now
    console.log(`Attempting to send signed tx:  ${serializedTx.toString('hex')}`);
    var receipt =  web3.eth.sendSignedTransaction('0x' + serializedTx.toString('hex'));
    console.log(`Receipt info:  ${JSON.stringify(receipt, null, 't')}`);

}

Nothing happens. The console logs:

    TEST.html:134 Attempting to send signed tx:  [a Tx that is 334 characters long] 
    TEST.html:136 Receipt info:  {}

When I try to include another function (that I know works) inside transferTokens with console logs, they never get logged. So presumably the function is never executed for some reason. My working function is:

tokenContract.methods.balanceOf(sender).call(function(err, bal){
    console.log("LOG X");
    if(!err){
        bal = web3.utils.fromWei(bal, 'ether');
        console.log("sender bal: "+bal);
        document.getElementById('balBeforeSending').innerHTML 
        = "The balance of "+ document.getElementById('tokenTransfer').options[document.getElementById('tokenTransfer').selectedIndex].innerHTML
            + " before sending " + sender + " was: " 
            + bal;  
    }
    else{
        console.log("line 106");
        console.error(err);
    }
});

I have placed it just before the “creating Raw Transaction” line in the original function.

I had await on both the count and the receipt previously but they never got logged so I thought I would remove them. The program was stuck waiting for them but never got anything back so I believe nothing after the await was executed.