Web3.js: Import Web3 not working in Typescript

[rhlsthrm]

Expected behavior

Documentation should accurately describe the way to import Web3 into a Typescript project. There are conflicting documentations about the correct import, neither of which work.

https://github.com/ethereum/web3.js#usage-with-typescript

import Web3 from 'web3';
const web3 = new Web3("ws://localhost:8546");

https://web3js.readthedocs.io/en/1.0/web3.html

import {Web3} from 'web3';

// "Web3.providers.givenProvider" will be set if in an Ethereum supported browser.
const web3 = new Web3(Web3.givenProvider || 'ws://some.local-or-remote.node:8546');

Actual behavior

Errors from both approaches, see below for logs.

Steps to reproduce the behavior

1. Create Typescript project.
2. Import using either of the documented processes.

Error Logs

[1] const web3 = new web3_1.Web3("ws://localhost:8546");
[1]              ^
[1]
[1] TypeError: web3_1.Web3 is not a constructor
[1]     at Object.<anonymous> (/Users/rahul/Desktop/connext/connext/moloch-monorepo/packages/moloch-backend/dist/src/index.js:6:14)
[1]     at Module._compile (internal/modules/cjs/loader.js:734:30)
[1]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
[1]     at Module.load (internal/modules/cjs/loader.js:626:32)
[1]     at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
[1]     at Function.Module._load (internal/modules/cjs/loader.js:558:3)
[1]     at Module.require (internal/modules/cjs/loader.js:663:17)
[1]     at require (internal/modules/cjs/helpers.js:20:18)
[1]     at Object.<anonymous> (/Users/rahul/Desktop/connext/connext/moloch-monorepo/packages/moloch-backend/dist/index.js:6:10)
[1]     at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
[1]     at Module.load (internal/modules/cjs/loader.js:626:32)
[1]     at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
[1]     at Function.Module._load (internal/modules/cjs/loader.js:558:3)
[1]     at Module.require (internal/modules/cjs/loader.js:663:17)
[1]     at require (internal/modules/cjs/helpers.js:20:18)

Versions

Web3.js: 1.0.0-beta.46
Node: v11.9.0
NPM: v6.5.0

[rhlsthrm]

If I use this syntax it gives me a Typescript error but appears to work:

import * as Web3 from 'web3';

Error is Cannot use 'new' with an expression whose type lacks a call or construct signature.ts(2351).

[nivida]

Thanks for creating this issue. I will test it next week and fix it asap.

[eswarasai]

@rhlsthrm -- The default typings included with web3 are working fine in the latest release i.e., 1.0.0-beta.46. You can find the example usage here --> https://github.com/ETHSurvey/ETHSurvey/blob/develop/src/core/services/web3.ts

Also, please ensure that your tsconfig.json includes the below config:

"allowSyntheticDefaultImports": true

If you're still facing an issue, feel free to share the code so that we'd be able to help :)

[joshstevens19]

Hey thanks for raising this issue. Web3 typing's are working fine, as the document says you can do

import Web3 from 'web3';
const web3 = new Web3("ws://localhost:8546");

Please supply your code on here (github repo) and i can happily have a look for you. Will close this issue as this is nothing to do with the typing's more your project set up (tsconfig.json) as they're working fine.

We can continue the conversation even though it is closed though.
Cheers
Josh

[rhlsthrm]

Thanks for the response @joshstevens19. I changed the tsconfig as you mentioned. My Typescript error in import disappeared because of that, but I still get another error:

Cannot start the application. TypeError: Cannot read property 'providers' of undefined
    at Object.<anonymous> (/Users/rahul/Desktop/connext/connext/moloch-monorepo/packages/moloch-backend/dist/src/web3.js:6:52)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Module.require (internal/modules/cjs/loader.js:663:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/rahul/Desktop/connext/connext/moloch-monorepo/packages/moloch-backend/dist/src/controllers/chainsaw.controller.js:19:16)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Module.require (internal/modules/cjs/loader.js:663:17)
    at require (internal/modules/cjs/helpers.js:20:18)

Here is my code: https://github.com/MolochVentures/moloch-monorepo/blob/broken-web3-example/packages/moloch-backend/src/web3.ts

[joshstevens19]

Hey I see your project has a lot going on with it so me trying to find out why that is not working will be hard due to so much going on.

What i have done is tested it on a BLANK typescript project so:

npm init
npm install web3
tsc --init

i then created a test.ts and wrote this little bit of code, similar to yours but using rinkeby as a provider, as yours was pointing to a locally hosted provider.

import Web3 from "web3";

const web3 = new Web3(
  new Web3.providers.HttpProvider("https://rinkeby.infura.io/")
);

console.log(web3);

i then ran tsc and node test.js and it worked as it is meant to, outputting the whole context of it onto my terminal.

So this shows it is not the web3 typings or project its something going on in your project itself which is out of depth for us to help you to solve.

Sorry i couldn't help more but i suggest stripping back to the bare minimum and getting it to work in your project. Hope this helps.

Thanks
Josh

[rhlsthrm]

Thanks for the help. I'll continue to debug from here.

[eswarasai]

@rhlsthrm -- The issue is with tsconfig.json. Sorry for pointing out the wrong config. It appears that allowSyntheticDefaultImports has been changed to esModuleInterop. So replace the same in your tsconfig.json and everything should work fine :)

[alexkvak]

@nivida have you plan to make it work without esModuleInterop enabled?
This option breaks another imports in my project.

[joshstevens19]

Hey @alexkvak if you can raise a issue with a way I can recreate I can take a look for you. 👍

[alexkvak]

@joshstevens19 thanks for quick answer. What should I do? Provide steps to reproduce or steps to fix this issue?
For now I leaved esModuleInterop disabled and use Web3 as follows:

import * as Web3 from 'web3';
import { Eth } from 'web3-eth';

const client: Eth = new (Web3 as any)(clientHost).eth;