4

I work with "react": "^17.0.2", I tried to add the web3 library by npm i web3 But when I try to instantiate my web3 object like this web3 = new Web3((window as any).ethereum); Or like this web3 = new Web3();

And I try to start my app (npm start)

I get a lot of errors

  • about my webpack I have to add some fallback in my webpack.config.js
Compiled with problems:

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in 'C:...\node_modules\cipher-base'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

  • add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
  • install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }

ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can't resolve 'crypto' in ....

ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can't resolve 'assert' in ...

ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can't resolve 'assert' in ... ERROR in ./node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

Module not found: Error: Can't resolve 'assert' in ...

ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can't resolve 'crypto' in ... ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in ...

ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26

Module not found: Error: Can't resolve 'http' in ...

ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28

Module not found: Error: Can't resolve 'https' in ...

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can't resolve 'http' in ...

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can't resolve 'https' in ...

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can't resolve 'os' in 'C:...\node_modules\xhr2-cookies\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

  • add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
  • install 'os-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "os": false }
  • a lot of errors like this : Failed to parse source map from 'C:....\node_modules\xhr2-cookies\xml-http-request-upload.ts' file: Error: ENOENT: no such file or directory

WARNING in ./node_modules/@ethersproject/abi/lib.esm/coders/fixed-bytes.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'C:...\node_modules@ethersproject\abi\src.ts\coders\fixed-bytes.ts' file: Error: ENOENT: no such file or directory, open 'C:...\node_modules@ethersproject\abi\src.ts\coders\fixed-bytes.ts' @ ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js 13:0-55 76:17-32 @ ./node_modules/@ethersproject/abi/lib.esm/index.js 4:0-56 6:0-204 6:0-204 @ ./node_modules/web3-eth-abi/lib/index.js 28:21-59 30:16-55 @ ./node_modules/web3-eth/lib/index.js 47:10-33 @ ./node_modules/web3/lib/index.js 34:10-29 @ ./src/components/Authenticate.tsx 7:0-24 14:19-23 14:24-42 @ ./src/App.tsx 5:0-53 10:35-47 @ ./src/index.tsx 7:0-24 11:33-36

WARNING in ./node_modules/@ethersproject/abi/lib.esm/coders/null.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'C:...\node_modules@ethersproject\abi\src.ts\coders\null.ts' file: Error: ENOENT: no such file or directory, open 'C:...\node_modules@ethersproject\abi\src.ts\coders\null.ts' @ ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js 14:0-42 50:19-28 @ ./node_modules/@ethersproject/abi/lib.esm/index.js 4:0-56 6:0-204 6:0-204 @ ./node_modules/web3-eth-abi/lib/index.js 28:21-59 30:16-55 @ ./node_modules/web3-eth/lib/index.js 47:10-33 @ ./node_modules/web3/lib/index.js 34:10-29 @ ./src/components/Authenticate.tsx 7:0-24 14:19-23 14:24-42 @ ./src/App.tsx 5:0-53 10:35-47 @ ./src/index.tsx 7:0-24 11:33-36

I used the basic template given by npx create-react-app Appname --template typescript And then added web3 library (npm i web3)

And tried this code

import React, { useState } from 'react'; import detectEthereumProvider from '@metamask/detect-provider' import Web3 from 'web3';

const Authenticate = () => {

const web3 = new Web3();

}

return (
    <div>
        TEST
    </div >
);

};

export default Authenticate;

Community
  • 1
  • 1
Stack overflow
  • 59
  • 1
  • 2
  • Same. There's a closed git issue. https://github.com/ChainSafe/web3.js/issues/4090 But I haven't had success. – Christian Lacdael Dec 18 '21 at 08:55
  • 5
    A possible solution, for now, is to downgrade "react-scripts": "^4.0.3". At least that worked for me. – Argiris Dec 21 '21 at 07:42
  • downgrading react-scripts worked for me – digidigo Dec 29 '21 at 05:28
  • 2
    Downgrading react-scripts to 4.0.3 is the temporary solution : * modify react-scripts to "4.0.3" in package.json * remove node_modules folder * npm install && npm install web3 * npm start You may encounter an error about Webpack, this could be solved by adding an .env file with `SKIP_PREFLIGHT_CHECK=true` inside. – g0tcha- Jan 05 '22 at 22:56

1 Answers1

0

Install react-scripts @4.0.3

npm install --save react-scripts@4.0.3
Nitesh Sawant
  • 41
  • 5