web3.js does not work when building in vue production mode (likely any webpack production build)

[mjdietzx]

Description

async web3 methods are never firing callbacks when built for production (vue cli 3 / webpack build). this also includes contract methods:

const MyContract = new web3.eth.Contract(abi, address);
MyContract.methods.myFunction().call()
.then(console.log);

everything works properly when running in development/test mode.

Expected behavior

This is when running my standard vue app https://cli.vuejs.org in development mode or locally:
npm run serve or npm run build --mode development

Actual behavior

This is when running my vue app after building for production npm run build

Steps to reproduce the behavior

• initialize a vue app https://cli.vuejs.org
• init your web3js instance
• call web3js.eth.net.getId().then(console.log).catch(console.error);

Error Logs

Not seeing any error logs. This is silently failing. Callbacks never triggered

Gists

Versions

• web3.js:
  everything over 1.0.0-beta.37

• nodejs:
  v11.6.0

• browser:
  all browsers

• ethereum node:
  metamask/infura. seems to effect all nodes (ie coinbase wallet, trust wallet)

[nivida]

Could you please fill out the complete issue template and provide further details with it for reproducing this behavior?

[mjdietzx]

Hey @nivida, I looked into this issue more and was able to simplify the description above (edited).

Thanks,
Mike

[mjdietzx]

I also think this issue is related to an issue I made earlier (although I'm not seeing these error messages I described in that issue anymore, and behavior seems slightly different) https://github.com/ethereum/web3.js/issues/2281

[lunochkin]

I have the same problem on 1.0.0-beta.48 with webpack production build in create-react-app based application.

It works fine in dev mode and throws The object could not be cloned. && DOMException: Failed to execute 'postMessage' on 'Window' error in production.

And if I check web3js.eth.net.getId() it gives pending Promise object as in the task description.

[lunochkin]

@mjdietzx Have you found any solution to the problem?

[mjdietzx]

@lunochkin unfortunately no. I am using "web3": "1.0.0-beta.37" and this works

[nivida]

@mjdietzx I've tested the production build with version beta.49 and it worked for me. Did you have the time to test it with the latest version?

[lunochkin]

@nivida, at least I can confirm that with beta.49 the production build works for me now. Thanks :)

[LandingMars]

@nivida I met the same problem, the details are as follows:

import Web3 from 'web3'
let web3 = new Web3(window.web3.currentProvider);
let contract = web3.eth.Contract(abi, addr);
contract.methods.buyTokens(address, code).send({
      from: address,
      value: value,
    }, (err, transactionHash) => {
      if (err) {
        console.log(err);
      }
    }).catch(err => {
         console.log(err);
    })

The error returned is as follows：

Error: No privateKey given to the TransactionSigner.

It is strange that this error only appears when built for production (vue cli 3 / webpack build). I tried several versions and found this to be the case.

[devstein]

@nivida I'm also encountering this issue for production react build using the latest 1.0.0-beta.50 build

[fireblockdev]

Problem with beta.50 on vuejs. No problem in dev but in production, it doesn't work.

[patitonar]

Similar issue for me when trying to call sendTransaction on production build for react app with version 1.0.0-beta.50. Works ok in dev environment

TypeError: Cannot set property 'parameters' of undefined
    at e.<anonymous> (web3-core-method.umd.js:1354)
    at _ (runtime.js:62)
    at Generator._invoke (runtime.js:288)
    at Generator.t.(:8887/anonymous function) [as next] (http://127.0.0.1:8887/static/js/2.bfd5ff30.chunk.js:1:649401)
    at n (asyncToGenerator.js:3)
    at s (asyncToGenerator.js:25)
    at asyncToGenerator.js:32
    at new Promise (<anonymous>)
    at e.<anonymous> (asyncToGenerator.js:21)
    at e.<anonymous> (web3-core-method.umd.js:1381)

[patitonar]

After upgrading to 1.0.0-beta.51:

Error: No privateKey given to the TransactionSigner.
    at web3-eth.umd.js:40
    at _ (runtime.js:62)
    at Generator._invoke (runtime.js:288)
    at Generator.t.(:8887/anonymous function) [as next] (http://127.0.0.1:8887/static/js/2.094ff145.chunk.js:1:643910)
    at r (asyncToGenerator.js:3)
    at s (asyncToGenerator.js:25)
    at asyncToGenerator.js:32
    at new Promise (<anonymous>)
    at e.<anonymous> (asyncToGenerator.js:21)
    at e.<anonymous> (web3-eth.umd.js:78)

[nivida]

Thanks for testing it @patitonar! This line is the bug. I will fix and release it asap.

[ShivamArora]

I'm facing the same issue as @patitonar provided with version 1.0.0-beta.51.
Was facing the DOMException issue earlier the same as @lunochkin with the version 1.0.0-beta.48. Then upgraded the version to 1.0.0-beta.51 and facing the No privateKey given to the TransactionSigner issue.

I'm waiting for this to be fixed.

For now, I've switched back to version 1.0.0-beta.37 and everything is working fine with it.

[whatTheHellDie]

1.0.0-beta.51

I'm facing the same issue as @patitonar provided with version 1.0.0-beta.51.
Was facing the DOMException issue earlier the same as @lunochkin with the version 1.0.0-beta.48. Then upgraded the version to 1.0.0-beta.51 and facing the No privateKey given to the TransactionSigner issue.

I'm waiting for this to be fixed.

For now, I've switched back to version 1.0.0-beta.37 and everything is working fine with it.

Can you post your code? I used 1.0.0-beta.37 or this error. I didn't know what to do for one day.

[ShivamArora]

@whatTheHellDie I'm away from my machine right now, so can't share the snippet.

But basically I was just trying to send a transaction on my contract using mycontract.methods.someContractMethod(params).send({from:sender_address}).

Downgrading to version 1.0.0-beta.37 worked for me.

Are you facing any problem with 1.0.0-beta.37? I think @nivida has fixed the issue as it seems but I'm yet to try out the latest build.

[AyushyaChitransh]

Using 1.0.0-beta.37 does not resolve the issue. I still get errors.

[ShivamArora]

Using 1.0.0-beta.37 does not resolve the issue. I still get errors.

Try using the following command:
npm install [email protected] --save --save-exact --unsafe-perm=true

[devedse]

@nivida , is this already released?

[nikhil3000]

@devedse Yes it is live. Just use
npm install [email protected] --save --save-exact --unsafe-perm=true