Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mjdietzx opened this issue Mar 6, 2019 · 21 comments · Fixed by #2609
Labels
Bug Addressing a bug

Comments

@mjdietzx
Copy link

mjdietzx commented Mar 6, 2019

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

screen shot 2019-03-07 at 9 45 08 am

Actual behavior

This is when running my vue app after building for production npm run build
screen shot 2019-03-07 at 9 43 30 am

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
Copy link
Contributor

nivida commented Mar 7, 2019

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

@mjdietzx
Copy link
Author

mjdietzx commented Mar 7, 2019

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

Thanks,
Mike

@mjdietzx
Copy link
Author

mjdietzx commented Mar 7, 2019

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) #2281

@nivida nivida added Needs Clarification Requires additional input and removed more information needed labels Mar 11, 2019
@lunochkin
Copy link

lunochkin commented Mar 19, 2019

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
Copy link

@mjdietzx Have you found any solution to the problem?

@mjdietzx
Copy link
Author

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

@mjdietzx mjdietzx reopened this Mar 19, 2019
@nivida
Copy link
Contributor

nivida commented Mar 20, 2019

@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
Copy link

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

@LandingMars
Copy link

LandingMars commented Mar 23, 2019

@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
Copy link

devstein commented Mar 26, 2019

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

@fireblockdev
Copy link

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

@nivida nivida added Bug Addressing a bug and removed Needs Clarification Requires additional input labels Mar 27, 2019
@patitonar
Copy link

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
Copy link

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
Copy link
Contributor

nivida commented Mar 28, 2019

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

@ShivamArora
Copy link

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
Copy link

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
Copy link

@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
Copy link

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

@ShivamArora
Copy link

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

Try using the following command:
npm install web3@1.0.0-beta.37 --save --save-exact --unsafe-perm=true

@devedse
Copy link

devedse commented Apr 3, 2019

@nivida , is this already released?

@nivida nivida mentioned this issue Apr 4, 2019
12 tasks
@nikhil3000
Copy link

@devedse Yes it is live. Just use
npm install web3@1.0.0-beta.52 --save --save-exact --unsafe-perm=true

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Addressing a bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.