Web3.js: Problems with TypeScript bindings of web3.js

[vguzev]

Steps to reproduce the problem:

1. Clone any boilerplate with TypeScript/Webpack. For example, this one:
   https://github.com/rokoroku/react-redux-typescript-boilerplate

git clone https://github.com/rokoroku/react-redux-typescript-boilerplate.git
cd react-redux-typescript-boilerplate

1. Install all dependencies:

npm install

1. Make sure that it is working correctly:

npm start

1. Install web3:

npm install web3

1. Add the following lines to file src/index.tsx somewhere before the ReactDOM.render:

import * as Web3 from 'web3';
const wa = window as any;
if (window.hasOwnProperty('web3')) {
  wa.web3 = new Web3(wa.web3.currentProvider);
} else {
  wa.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}

1. Start the application:

npm start

Expected results:

It shouldn't throw any errors.

Actual results:

It gives the following errors in console:

ERROR in ./node_modules/scrypt/index.js
Module not found: Error: Can't resolve './build/Release/scrypt' in '/Users/vguzev/Projects/test2/react-redux-typescript-boilerplate/node_modules/scrypt'
 @ ./node_modules/scrypt/index.js 3:19-52
 @ ./node_modules/scrypt.js/node.js
 @ ./node_modules/web3-eth-accounts/src/index.js
 @ ./node_modules/web3-eth/src/index.js
 @ ./node_modules/web3/src/index.js
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./index.tsx

ERROR in ./node_modules/got/index.js
Module not found: Error: Can't resolve './package' in '/Users/vguzev/Projects/test2/react-redux-typescript-boilerplate/node_modules/got'
 @ ./node_modules/got/index.js 22:12-32
 @ ./node_modules/swarm-js/lib/files.js
 @ ./node_modules/swarm-js/lib/api-node.js
 @ ./node_modules/web3-bzz/src/index.js
 @ ./node_modules/web3/src/index.js
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./index.tsx

ERROR in ./node_modules/swarm-js/lib/api-node.js
Module not found: Error: Can't resolve 'child_process' in '/Users/vguzev/Projects/test2/react-redux-typescript-boilerplate/node_modules/swarm-js/lib'
 @ ./node_modules/swarm-js/lib/api-node.js 5:20-44
 @ ./node_modules/web3-bzz/src/index.js
 @ ./node_modules/web3/src/index.js
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./index.tsx

ERROR in ./node_modules/got/index.js
Module not found: Error: Can't resolve 'electron' in '/Users/vguzev/Projects/test2/react-redux-typescript-boilerplate/node_modules/got'
 @ ./node_modules/got/index.js 45:20-39
 @ ./node_modules/swarm-js/lib/files.js
 @ ./node_modules/swarm-js/lib/api-node.js
 @ ./node_modules/web3-bzz/src/index.js
 @ ./node_modules/web3/src/index.js
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./index.tsx

Here is the package.json that was generated:

{
  "name": "typescript-react-redux-boilerplate",
  "version": "1.0.0",
  "private": true,
  "description": "A frontend boilerplate with React, Redux and Typescript",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --debug --devtool cheap-module-source-map --output-pathinfo --history-api-fallback --hot --inline --progress --colors --port 3000 --open",
    "build": "webpack -p --progress --colors"
  },
  "license": "MIT",
  "devDependencies": {
    "@types/classnames": "2.2.3",
    "@types/history": "4.6.0",
    "@types/node": "8.0.26",
    "@types/react": "16.0.5",
    "@types/react-dom": "15.5.4",
    "@types/react-redux": "5.0.6",
    "@types/react-router": "4.0.15",
    "@types/redux-actions": "1.2.8",
    "@types/webpack": "3.0.10",
    "@types/webpack-env": "1.13.0",
    "awesome-typescript-loader": "^3.2.3",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "postcss": "^6.0.10",
    "postcss-browser-reporter": "^0.5.0",
    "postcss-cssnext": "^3.0.2",
    "postcss-import": "^10.0.0",
    "postcss-loader": "^2.0.6",
    "postcss-reporter": "^5.0.0",
    "postcss-url": "^7.1.2",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.18.2",
    "typescript": "^2.5.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "classnames": "^2.2.5",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "redux": "^3.7.2",
    "redux-actions": "^2.2.1",
    "web3": "^1.0.0-beta.23"
  }
}

[vguzev]

It looks like that this problem can be reproduced only in beta versions of web3.js.
In version 0.18.2 everything is OK.

[frozeman]

This seems like to be a problem with the scrypt package, which is used in web3-acounts, to encrypt and decrypt keystore files. It contains a precompile i think. Sadly i have no idea how to work around this, i tried already many different version of scrypt packages, but they are mostly very slow. This precompiled one is fast and works also in the browser.

If you find any solution around this would be very helpful. The branch i was experimenting the scrypt packages on is: https://github.com/ethereum/web3.js/tree/asyncScrypt

[dougbacelar]

Just FYI,

I was trying to get this to work with create-react-app and it went fine with the latest version "web3": "^1.0.0-beta.24"

[vguzev]

I just tried version 1.0.0-beta.24 and it has even more errors:

ERROR in [at-loader] ./node_modules/web3/types.d.ts:1:27 
    TS2307: Cannot find module 'bignumber.js'.

ERROR in [at-loader] ./src/index.tsx:12:10 
    TS2305: Module '"/Users/vguzev/Projects/test/react-redux-typescript-boilerplate/node_modules/web3/index"' has no exported member 'Web3'.

ERROR in [at-loader] ./src/index.tsx:12:22 
    TS2497: Module '"/Users/vguzev/Projects/test/react-redux-typescript-boilerplate/node_modules/web3/index"' resolves to a non-module entity and cannot be imported using this construct.

If you take a look at types.d.ts - it is using underscore and bignumber.js, while there are no such dependencies in package.json file.

Also types.d.ts doesn't have a default export for Web3. So, the constructs like import * as Web3 from 'web3' and import { Web3 } from 'web3' won't work at all.

[vguzev]

@dougbacelar Just checked with create-react-app - you're right, it works. It looks like that this is only TypeScript-related error. Renamed this issue.

[ghost]

I have the same errors and can't build project with 1.0.0-beta.24

It's possible to configure tsconfig.json to ignore this types.d.ts file?

[dougbacelar]

I have been trying to get this to work with CRNA with no luck.

My steps:

create-react-native-app testing-web3
cd testing-web3
npm run ios // making sure it works on its own (it does)

npm install --save web3 // first trying with the latest web3 version
add const Web3 = require('web3'); to App.js
npm run ios

error is:

Unable to resolve module 'crypto' from '/Users/doug/Desktop/dev/testing-web3/node_modules/web3-eth-accounts/src/index.js': Module does not exist in the module map.

Tried downgrading to version 0.19.0 and the app runs, however when I try adding the following code:
const web3 = new Web3(
new Web3.providers.HttpProvider('https://mainnet.infura.io/')
);

web3.eth.getBalance('0xf3dbdf9a23dff4a7faba47182a4c8b321637ba2e').then(console.log);//(random eth address gotten from etherscan.io)

the error is:

Synchronous http requests are not supported

Updating to the next version (v1.0.0-beta.9) brings it back to the former error.

Any thoughts/help is highly appreciated!

[connectdotz]

@vguzev there are a few issues here, not all typescript related:

webpack
the boilerplate webpack config is not picking up the browser flavor of libraries because it explicitly stated in the mainFields configuration:
mainFields: ["main"]
Since you are targeting browser, change it to
mainFields: ["browser", "main"]

typescript types
the current type files in web3 is incomplete and incorrect. In addition, you need to change your import statement (in index.tsx) to:
import Web3 = require("web3");

browser compatibility
There might still be some browser compatibility issues (not related to typescript) as @frozeman mentioned, which you might bump into later when actually invoking the methods that hit those modules, such as the scrypt library in the accounts pkg... I have seen people using "scrypt-js", but I haven't compared them...

---

If you can't wait for the typescript type fix, you can hack the node_modules/web3/types.d.ts where it imports BigNumber to:
import { BigNumber } from "bn.js";

These changes should at least get you to run the todo app in the boilerplate.

[dougbacelar]

I fixed my issue

If anyone is interested, I created a step-by-step simple guide on how to set up web3.js with CRNA:
https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766

[vguzev]

@connectdotz Thanks, your solution works perfectly! 👍
Should we close this issue now or leave it open until someone will fix bignumber.js dependency in typings?

[ericzon]

Thanks @dougbacelar this worked for me:

const Web3 = require('web3');

[anymos]

Hello everyone, any progress and a more elegant solution fro this ?

[nivida]

Typings are now on DefinitelyTyped (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/web3)

[theone3nu]

I fixed my issue

If anyone is interested, I created a step-by-step simple guide on how to set up web3.js with CRNA:
https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766

This works fine on expo. But when i eject the code and run it in xcode i am getting the same error again in ios simulator. cannot find module crypto fro web3-eth-accounts. How to resolve this error.