Cannot find name 'Buffer'. Can't find module 'net'. #2260

RohanKapurDEV · 2019-01-29T10:03:11Z

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

Start a new Ionic project
Install Web3 like so - npm install --save web3
Install node types like so - npm install --save-dev @types/node
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.

The text was updated successfully, but these errors were encountered:

joshstevens19 · 2019-01-29T11:02:40Z

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 · 2019-01-29T11:17:08Z

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 · 2019-01-29T11:28:01Z

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 · 2019-01-29T11:36:07Z

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 · 2019-01-29T11:39:52Z

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 · 2019-01-29T11:47:31Z

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 · 2019-01-29T12:04:37Z

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 · 2019-01-29T12:06:32Z

I have just done a PR which fixes the first issue you raised - #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 · 2019-01-29T12:17:04Z

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 · 2019-01-29T12:23:45Z

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

joshstevens19 · 2019-01-29T12:47:06Z

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

kavishgandhi · 2019-02-01T11:07:51Z

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 · 2019-02-01T11:19:16Z

Thanks for this.

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

Patch applied as suggested in web3/web3.js#2260 (comment) and https://github.com/ChainSafe/web3.js/blob/1.x/README.md

moonClimber · 2021-04-11T09:12:35Z

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

[truncate... se the original post above]

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

Just in case someone is not finding the file, at this moment I am using Angular 11.2.8 and web3 1.3.5
I solved this issue by following the suggest above, but the file to change is here
\node_modules@angular-devkit\build-angular\src\webpack\configs\browser.js

the line 82 of this file has to be changed from
node: false
to
node: {crypto: true, stream: true}
just @joshstevens19 says and following the rest. It works for me.
Thanks

okevinok · 2021-06-15T06:35:46Z

how ti fix the same problem in vite

okevinok · 2021-06-15T06:36:12Z

tanmaykk9 · 2021-10-04T14:54:20Z

Facing the same issue as Buffer is not defined in React.

baccarani · 2022-08-25T15:02:48Z

@moonClimber Hi, thanks for your answer, what if you don't have browser.js in your node_modules --> config folder? Could I just create the browser.js file? What code would I need to add to this file?

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

[truncate... se the original post above]

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

Just in case someone is not finding the file, at this moment I am using Angular 11.2.8 and web3 1.3.5 I solved this issue by following the suggest above, but the file to change is here \node_modules@angular-devkit\build-angular\src\webpack\configs\browser.js

the line 82 of this file has to be changed from node: false to node: {crypto: true, stream: true} just @joshstevens19 says and following the rest. It works for me. Thanks

joshstevens19 added the Types Incorrect or missing types label Jan 29, 2019

joshstevens19 mentioned this issue Jan 29, 2019

Fix/types reference node types #2261

Merged

14 tasks

RohanKapurDEV closed this as completed Jan 29, 2019

joshstevens19 mentioned this issue Jan 29, 2019

fix: patch the angular browser.js to allow `{crypto: true, stream: … #2262

Merged

14 tasks

alcuadrado mentioned this issue Sep 16, 2019

Proposal to stabilize Web3 1.x #3070

Closed

carte7000 mentioned this issue Sep 24, 2019

Angular cli missing node dependency ecadlabs/taquito#119

Closed

joshstevens19 mentioned this issue Oct 12, 2019

webpack scrypt.js: Critical dependency: the request of a dependency is an expression #3018

Closed

luckyr13 pushed a commit to luckyr13/ethereal-bnb that referenced this issue Feb 6, 2021

Patch web3 for angular

b2cf397

Patch applied as suggested in web3/web3.js#2260 (comment) and https://github.com/ChainSafe/web3.js/blob/1.x/README.md

dmitry-salnikov mentioned this issue May 17, 2021

Angular hack with node: {crypto: true} doesn't work anymore in Angular 12 #4070

Closed

araaan12 mentioned this issue Aug 21, 2022

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. #5368

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot find name 'Buffer'. Can't find module 'net'. #2260

Cannot find name 'Buffer'. Can't find module 'net'. #2260

RohanKapurDEV commented Jan 29, 2019 •

edited

Loading

joshstevens19 commented Jan 29, 2019 •

edited

Loading

RohanKapurDEV commented Jan 29, 2019

joshstevens19 commented Jan 29, 2019 •

edited

Loading

joshstevens19 commented Jan 29, 2019

RohanKapurDEV commented Jan 29, 2019

joshstevens19 commented Jan 29, 2019 •

edited

Loading

RohanKapurDEV commented Jan 29, 2019

joshstevens19 commented Jan 29, 2019 •

edited

Loading

joshstevens19 commented Jan 29, 2019 •

edited

Loading

RohanKapurDEV commented Jan 29, 2019

joshstevens19 commented Jan 29, 2019

kavishgandhi commented Feb 1, 2019

joshstevens19 commented Feb 1, 2019

moonClimber commented Apr 11, 2021 •

edited

Loading

okevinok commented Jun 15, 2021

okevinok commented Jun 15, 2021

tanmaykk9 commented Oct 4, 2021

baccarani commented Aug 25, 2022 •

edited

Loading

Cannot find name 'Buffer'. Can't find module 'net'. #2260

Cannot find name 'Buffer'. Can't find module 'net'. #2260

Comments

RohanKapurDEV commented Jan 29, 2019 • edited Loading

Expected behavior

Actual behavior

Steps to reproduce the behavior

Error Logs

Versions

Side notes

joshstevens19 commented Jan 29, 2019 • edited Loading

RohanKapurDEV commented Jan 29, 2019

joshstevens19 commented Jan 29, 2019 • edited Loading

joshstevens19 commented Jan 29, 2019

RohanKapurDEV commented Jan 29, 2019

joshstevens19 commented Jan 29, 2019 • edited Loading

RohanKapurDEV commented Jan 29, 2019

joshstevens19 commented Jan 29, 2019 • edited Loading

joshstevens19 commented Jan 29, 2019 • edited Loading

RohanKapurDEV commented Jan 29, 2019

joshstevens19 commented Jan 29, 2019

kavishgandhi commented Feb 1, 2019

joshstevens19 commented Feb 1, 2019

moonClimber commented Apr 11, 2021 • edited Loading

okevinok commented Jun 15, 2021

okevinok commented Jun 15, 2021

tanmaykk9 commented Oct 4, 2021

baccarani commented Aug 25, 2022 • edited Loading

RohanKapurDEV commented Jan 29, 2019 •

edited

Loading

joshstevens19 commented Jan 29, 2019 •

edited

Loading

joshstevens19 commented Jan 29, 2019 •

edited

Loading

joshstevens19 commented Jan 29, 2019 •

edited

Loading

joshstevens19 commented Jan 29, 2019 •

edited

Loading

joshstevens19 commented Jan 29, 2019 •

edited

Loading

moonClimber commented Apr 11, 2021 •

edited

Loading

baccarani commented Aug 25, 2022 •

edited

Loading