ERROR: Webpack < 5 after installing web3 and implementing into React Native App.js

Question

I am getting an error after trying to install and use web3 into my react native website, that I am building to learn more about web3 development. After installing web3 and then adding:

import Web3 from 'web3';

const web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
web3.eth.getAccounts().then(console.log);

Into my App.js file I have received these errors that follow:

Compiled with problems:X

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

Module not found: Error: Can't resolve 'stream' in '/Users/keyesbruh/Documents/Programming/nft-project/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 '/Users/keyesbruh/Documents/Programming/nft-project/node_modules/eth-lib/lib'

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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }


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

Module not found: Error: Can't resolve 'crypto' in '/Users/keyesbruh/Documents/Programming/nft-project/node_modules/web3-eth-accounts/lib'

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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }


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 '/Users/keyesbruh/Documents/Programming/nft-project/node_modules/web3-eth-accounts/node_modules/eth-lib/lib'

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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }


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

Module not found: Error: Can't resolve 'http' in '/Users/keyesbruh/Documents/Programming/nft-project/node_modules/web3-providers-http/lib'

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: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }


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

Module not found: Error: Can't resolve 'https' in '/Users/keyesbruh/Documents/Programming/nft-project/node_modules/web3-providers-http/lib'

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: { "https": require.resolve("https-browserify") }'
    - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "https": false }


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

Module not found: Error: Can't resolve 'http' in '/Users/keyesbruh/Documents/Programming/nft-project/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: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }


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

Module not found: Error: Can't resolve 'https' in '/Users/keyesbruh/Documents/Programming/nft-project/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: { "https": require.resolve("https-browserify") }'
    - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "https": false }


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

Module not found: Error: Can't resolve 'os' in '/Users/keyesbruh/Documents/Programming/nft-project/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 }

I have found these errors on multiple other posts. I have tried to install each of the following os-browserify, https-browserify, stream-http, stream-browserify, crypto-browserify. While also trying to add a fallback for each one in webpack.config.js file. But still nothing is helping or working.

KeyesCode · Accepted Answer · 2022-02-24 03:18:04Z

5

I figured it out. There's two fixes from this article: https://medium.com/@rasmuscnielsen/how-to-compile-web3-js-in-laravel-mix-6eccb4577666

Easy way, Need to change import:

import Web3 from 'web3'

to

import Web3 from 'web3/dist/web3.min.js'

answered Feb 24, 2022 at 3:18

KeyesCode

1451 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeremy Caney · Accepted Answer · 2022-04-15 00:29:25Z

0

Do the following:

sudo npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserify

and then change the React scripts version in package.json file to 4.0.3.

edited Apr 15, 2022 at 0:29

Jeremy Caney

7,808115 gold badges58 silver badges86 bronze badges

answered Apr 14, 2022 at 9:29

Pankaj Joshi

111 bronze badge

Comments

Sinisa Rudan · Accepted Answer · 2023-10-13 19:24:48Z

0

I cannot fully be sure that it fits your use case, but based on my experience I solved the following way, it might worth checking if it solves your case:

Install vite-plugin-node-polyfills:

npm install --save-dev vite-plugin-node-polyfills

or yarn add --dev vite-plugin-node-polyfills

and add nodePolyfills() to vite.config.ts

export default defineConfig({
  plugins: [
    nodePolyfills(),
    ...
  ],
  ...
}

https://www.npmjs.com/package/vite-plugin-node-polyfills

answered Oct 13, 2023 at 19:24

Sinisa Rudan

1,11214 silver badges16 bronze badges

Collectives™ on Stack Overflow

ERROR: Webpack < 5 after installing web3 and implementing into React Native App.js

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related