Web3.js: Cannot find name 'Buffer'. Can't find module 'net'.

[RohanKapurDEV]

Expected behavior

Ionic/Angular handles the Web3 import fine and serves project

Actual behavior

I get an error stating that the name 'Buffer' cannot be found and that the 'net' module cannot be found, it then suggests me to install @types/node. After I install it, I get the same error.

Steps to reproduce the behavior

1. Start a new Ionic project
2. Install Web3 like so - npm install --save web3
3. Install node types like so - npm install --save-dev @types/node
4. run ionic serve -c and get the error found below

Error Logs

[ng] ERROR in node_modules/web3-bzz/types/index.d.ts(28,27): error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node`.
[ng] node_modules/web3-bzz/types/index.d.ts(30,60): error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node`.
[ng] node_modules/web3-core/types/index.d.ts(20,22): error TS2307: Cannot find module 'net'.
[ng] node_modules/web3-providers/types/index.d.ts(23,22): error TS2307: Cannot find module 'net'.
[ng] node_modules/web3-utils/types/index.d.ts(71,54): error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node`.
[ng] node_modules/web3-utils/types/index.d.ts(72,48): error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node`.
[ng] node_modules/web3/types/index.d.ts(22,22): error TS2307: Cannot find module 'net'.
[ng]
[ng] i ｢wdm｣: Failed to compile.

Versions

NPM version 6.4.1, NodeJS version 10.13.0, Ionic CLI v4.9.0, Ionic framework v4, @anglular/cli version 7.2.3, web3: ^1.0.0-beta.41

Side notes

I'm using ionic v4 which just released, it uses Angular as the main frontend framework though. I tried installing @types/node as a developer dependency and normally, either way it didn't work. Would be happy to provide more information if requested, or if anyone knows a version of web3 that works with angular, I'd be happy to try that out too.

[joshstevens19]

Hey @RohanKapurDEV, In your angular app you have to whitelist the types for node to allow the web3 typing's to work properly when building through the angular cli or iconic. To fix this you have to add the node typing in your tsconfig.app.json and if you have tests your tsconfig.spec.json after you have installed @types/node like:

"types": ["node"],

The latest build works with angular perfectly. I will have a look if i can show a better warning and maybe add some docs for this so people can find the solution quicker.

This should solve it though and allow your angular app to build.
Thanks

[RohanKapurDEV]

Hey, thanks. That actually worked, but not for long unfortunately. :(
Once I added what you suggested into my tsconfig.app.json file, I tried to console log the Web3 import within the service it was added to just as a test and got the following errors.

[ng]
[ng] WARNING in ./node_modules/asn1.js/lib/asn1/api.js
[ng] Module not found: Error: Can't resolve 'vm' in 'C:\Users\Rohan\Desktop\Ready Wallet\Test projects\ionicDappTestGround\node_modules\asn1.js\lib\asn1'
[ng]
[ng] ERROR in ./node_modules/eth-lib/lib/bytes.js
[ng] Module not found: Error: Can't resolve 'crypto' in 'C:\Users\Rohan\Desktop\Ready Wallet\Test projects\ionicDappTestGround\node_modules\eth-lib\lib'
[ng] ERROR in ./node_modules/web3-eth-accounts/dist/web3-eth-accounts.umd.js
[ng] Module not found: Error: Can't resolve 'crypto' in 'C:\Users\Rohan\Desktop\Ready Wallet\Test projects\ionicDappTestGround\node_modules\web3-eth-accounts\dist'
[ng] ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js
[ng] Module not found: Error: Can't resolve 'crypto' in 'C:\Users\Rohan\Desktop\Ready Wallet\Test projects\ionicDappTestGround\node_modules\web3-eth-accounts\node_modules\eth-lib\lib'
[ng] ERROR in ./node_modules/web3-providers/dist/web3-providers.umd.js
[ng] Module not found: Error: Can't resolve 'http' in 'C:\Users\Rohan\Desktop\Ready Wallet\Test projects\ionicDappTestGround\node_modules\web3-providers\dist'
[ng] ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
[ng] Module not found: Error: Can't resolve 'http' in 'C:\Users\Rohan\Desktop\Ready Wallet\Test projects\ionicDappTestGround\node_modules\xhr2-cookies\dist'
[ng] ERROR in ./node_modules/web3-providers/dist/web3-providers.umd.js
[ng] Module not found: Error: Can't resolve 'https' in 'C:\Users\Rohan\Desktop\Ready Wallet\Test projects\ionicDappTestGround\node_modules\web3-providers\dist'
[ng] ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
[ng] Module not found: Error: Can't resolve 'https' in 'C:\Users\Rohan\Desktop\Ready Wallet\Test projects\ionicDappTestGround\node_modules\xhr2-cookies\dist'
[ng] ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
[ng] Module not found: Error: Can't resolve 'os' in 'C:\Users\Rohan\Desktop\Ready Wallet\Test projects\ionicDappTestGround\node_modules\xhr2-cookies\dist'
[ng] ERROR in ./node_modules/browserify-sign/browser/index.js
[ng] Module not found: Error: Can't resolve 'stream' in 'C:\Users\Rohan\Desktop\Ready Wallet\Test projects\ionicDappTestGround\node_modules\browserify-sign\browser'
[ng] ERROR in ./node_modules/cipher-base/index.js
[ng] Module not found: Error: Can't resolve 'stream' in 'C:\Users\Rohan\Desktop\Ready Wallet\Test projects\ionicDappTestGround\node_modules\cipher-base'
[ng] ERROR in ./node_modules/hash-base/index.js
[ng] Module not found: Error: Can't resolve 'stream' in 'C:\Users\Rohan\Desktop\Ready Wallet\Test projects\ionicDappTestGround\node_modules\hash-base'
[ng] chunk {common} common.js, common.js.map (common) 18.5 kB  [rendered]
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 5.6 kB  [rendered]
[ng] chunk {main} main.js, main.js.map (main) 33.4 kB [initial] [rendered]
[ng] chunk {pages-ethers-telemetry-ethers-telemetry-module} pages-ethers-telemetry-ethers-telemetry-module.js, pages-ethers-telemetry-ethers-telemetry-module.js.map (pages-ethers-telemetry-ethers-telemetry-module) 2.09 MB  [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.89 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 79.6 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.34 MB [initial] [rendered]
[ng] i ｢wdm｣: Failed to compile.

It seems as though now there are several other modules that can't be resolved apparently. Crypto, http, https, os, and stream specifically. I'll research more into these as I wait for a response from someone, hopefully I can figure it out, I'll post and close the issue if I do, until then all suggestions are welcome. Thanks.

[joshstevens19]

There is a lot of different errors from different packages in that trace, It looks like you may be trying to use node things in a UI app, can you show me your angular service typescript code which throws this error please? Also before that can you delete all your node_modules and reinstall to make sure NPM has not got its knickers in a twist? I literally just set up a boilerplate angular 7 app and used the web3 typing's which is working fine once i do the above steps.

[joshstevens19]

I just found a fix for this error from your initial bug raised, i will do a PR now and resolve this so it shouldn't happen again, the solution is a temp fix until this PR i create is merged.

[RohanKapurDEV]

Sure, here is the test service im using:

import { Injectable } from '@angular/core';
import Web3 from 'web3';

@Injectable({
  providedIn: 'root'
})
export class EthersService {

  web3 = new Web3(new Web3.providers.HttpProvider('https://ropsten.infura.io/v3/INFURA_API_KEY_HERE'));


  constructor() { }

  test() {
    console.log(this.web3)
  }

}

I basically just inject this service into a component's .ts file and call the test method. That produces the error.

[joshstevens19]

strange i done exactly that and its just worked. If you try a plain boilerplate angular app without the other packages you have does it work?

I am saying this because you get a lot of other errors being thrown which are not related to web3

ERROR in ./node_modules/eth-lib/lib/bytes.js
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'stream
....

I think this may be the other packages causing this and if the above works then that is probably the cause. If you want me to have a look @ it please feel welcome to create a repo which i can look at.

[RohanKapurDEV]

strange i done exactly that and its just worked. If you try a plain boilerplate angular app without the other packages you have does it work?

I am saying this because you get a lot of other errors being thrown which are not related to web3

ERROR in ./node_modules/eth-lib/lib/bytes.js
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'stream
....

I think this may be the other packages causing this and if the above works then that is probably the cause. If you want me to have a look @ it please feel welcome to create a repo which i can look at.

Hey I just made a repo you can take a look at, hopefully you'll spot something I can't. Let me know, and thanks for the continued help.
Repo Link
https://github.com/RohanKapurDEV/Web3TestAngularIonic

[joshstevens19]

I have just done a PR which fixes the first issue you raised - https://github.com/ethereum/web3.js/pull/2261 (you have to use the workaround i stated above until its released)👍 I will take a look at your repo now for you.

[joshstevens19]

ahhh i think i found your issue, this is a mismatch issue with the angular-cli-files default browser.js settings and is something you have to fix to get web3 to work on angular apps.

if you create a file called patch.js in the root of the angular app

const fs = require('fs');
const f = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';

fs.readFile(f, 'utf8', function (err, data) {
    if (err) {
        return console.log(err);
    }
    var result = data.replace(/node: false/g, 'node: {crypto: true, stream: true}');

    fs.writeFile(f, result, 'utf8', function (err) {
        if (err) return console.log(err);
    });
});

then in your package.json under scripts add "postinstall": "node patch.js"

run npm install again and then ng build will all work and you shouldn't have anymore issues.

This is because we have to replace the node:false in the /angular-cli-files/models/webpack-configs/browser.js with 'node: {crypto: true, stream: true}' to allow web3 to work with angular (as they enforce node: false.)

I just did that and boom worked on your repo:

I will look further into this and try to find a way we can fix this within the install of web3 as its pretty annoying to have to add the above and hard to know how to sort if you not came across it before.

Cheers @RohanKapurDEV

[RohanKapurDEV]

Thanks so much for all the help. Much appreciated! I'll go ahead and close the issue.

[joshstevens19]

Great i also fixed that patch.js issue here so you will be able to remove your script on the next release :) https://github.com/ethereum/web3.js/pull/2262 Thanks for spotting them really appreciate it

[humblesapien]

For future readers, if the above method does not work try this:
sudo npm install ethereum/web3.js
and then ng serve/build will work (hopefully).

[joshstevens19]

Thanks for this.

This issue should never appear again after the next release though. 👍