2

I'm trying to convert a DApp that uses web3.js from JavaScript to TypeScript, but I have encountered a bunch of runtime errors. I'm using Visual Studio Code IDE, and I'm compiling to ES6. I've reduced the project to the smallest code that still has these problems.

Can someone help me fix this? Thanks in advance!

(if I forgot to include some important information, please feel free to comment)

NPM packages:

  • @types/web3 (version 1.0.12)

  • web3 (version 1.0.0-beta.36)

Web page:

<script src="system.js"></script>
<script>
System.config({
    baseURL: './out',
    packages: {
        './out': {
            defaultJSExtensions: 'js'
        }
    },
    meta: {
        '*': {
            format: 'register'
        }
    },
});
window.addEventListener("load", (async function(){
    await System.import("init");
}));
</script>

Init.ts:

import Web3 from "web3";

const ABI: any[] = [];
let web3: Web3;
export async function init()
{
    if (typeof (window as any).web3 !== "undefined")
    {
        const injectedWeb3: Web3 = ((window as any).web3 as Web3);
        web3 = new Web3(injectedWeb3.currentProvider); // This line produces the error: TypeError: web3_1.default is not a constructor
    }
    else
    {
        web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
    }
    const myABIinstance = new web3.eth.Contract(ABI);
}
init();

The full stack trace of the run-time error:

TypeError: web3_1.default is not a constructor
init.ts:10
    at /home/jesse/MinimalWeb3Typescript/init.ts:10:16
    at Generator.next (<anonymous>)
    at /home/jesse/MinimalWeb3Typescript/out/init.js:8:76
    at new Promise (<anonymous>)
    at __awaiter (/home/jesse/MinimalWeb3Typescript/out/init.js:4:17)
    at init (/home/jesse/MinimalWeb3Typescript/out/init.js:14:17)
    at Object.execute (/home/jesse/MinimalWeb3Typescript/init.ts:18:1)
    at U (/home/jesse/MinimalWeb3Typescript/system.js:4:8818)
    at /home/jesse/MinimalWeb3Typescript/system.js:4:11430
    at /home/jesse/MinimalWeb3Typescript/system.js:4:11499
  • 1
    Can you post a little more on the error / output ? – Nikita Fuchs Nov 24 '18 at 2:29
  • @NikitaFuchs I have added the complete error message – Jesse Busman Nov 24 '18 at 10:43
1

If using a recent web3 (e.g. 1.0.0-beta.50), a possible remedy is to set esModuleInterop:

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

See also: https://github.com/ethereum-ts/TypeChain/blob/5b4f397c64b7d32cdf2ce50062f69bad324efa99/test/integration/targets/web3-1.0.0/

0
+25

Try to change your code as below:

const Web3 = require('web3');
declare var window: any;

const ABI: any[] = [];
let web3: any;
export async function init()
{
    if (typeof window.web3 !== 'undefined') {
      // Use Mist/MetaMask's provider
     this.web3 = new Web3(window.web3.currentProvider);
    }
    else {
      console.warn('No web3 detected.');
    }
}
init();

and first check if it works. If it does, you can make the other changes.

  • Thanks for your response. Unfortunately this gives me a compile-time error wherever Web3 is mentioned: init.ts:8:11 - error TS2304: Cannot find name 'Web3'. – Jesse Busman Nov 24 '18 at 11:01
  • Please refer to updated answer – Aniket Nov 24 '18 at 11:09
  • The code in your current answer gives me Error: require is not defined. I'm probably doing something wrong with NPM packages and SystemJS. It's my first time working with them. – Jesse Busman Nov 24 '18 at 11:23
  • are you using angular? – Aniket Nov 24 '18 at 11:24
  • No, just web3.js – Jesse Busman Nov 24 '18 at 11:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.