Web3 don't work with latest of React

[thedarkknight197]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

I have an issue with web3 with latest version of react.
It can't be imported in code.

The message is:

Compiled with problems:X

ERROR in ./node_modules/browserify-sign/node_modules/safe-buffer/index.js 4:13-30

Module not found: Error: Can't resolve 'buffer' in 'project/node_modules/browserify-sign/node_modules/safe-buffer'

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

 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
 @ ./src/store/user-context.js 7:0-24
 @ ./src/index.js 9:0-59 13:38-57

25 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.65.0 compiled with 25 errors and 27 warnings in 261 ms

Expected Behavior

I am expected that the import with

import Web3 from 'web3';

still work

Steps to Reproduce

1. Create a new React Project: npx create-react-app newsite
2. enter in project: cd newSite
3. Install web3: npm i web3
4. Import web3 in App.js: import Web3 from 'web3';

Web3.js Version

1.6.0

Environment

• Operating System: MacOS Monterey Macbook Pro 16" M1 Pro
• Browser: Brave
• Node.js Version: v16.13.0
• NPM Version: 8.1.0

Anything Else?

No response

[yieniggu]

same here, not working and getting the following:

Compiled with problems:X

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

Module not found: Error: Can't resolve 'stream' in '/home/basti/Desktop/activate/kolor-ui/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 7:193-227

Module not found: Error: Can't resolve 'crypto' in '/home/basti/Desktop/activate/kolor-ui/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/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can't resolve 'assert' in '/home/basti/Desktop/activate/kolor-ui/node_modules/ethereumjs-util/dist.browser'

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


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

Module not found: Error: Can't resolve 'assert' in '/home/basti/Desktop/activate/kolor-ui/node_modules/ethereumjs-util/dist.browser'

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


ERROR in ./node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

Module not found: Error: Can't resolve 'assert' in '/home/basti/Desktop/activate/kolor-ui/node_modules/ethereumjs-util/dist.browser'

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


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

Module not found: Error: Can't resolve 'crypto' in '/home/basti/Desktop/activate/kolor-ui/node_modules/swarm-js/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 '/home/basti/Desktop/activate/kolor-ui/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-providers-http/lib/index.js 30:11-26

Module not found: Error: Can't resolve 'http' in '/home/basti/Desktop/activate/kolor-ui/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 '/home/basti/Desktop/activate/kolor-ui/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/web3-providers-ws/lib/helpers.js 11:12-26

Module not found: Error: Can't resolve 'url' in '/home/basti/Desktop/activate/kolor-ui/node_modules/web3-providers-ws/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: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }


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

Module not found: Error: Can't resolve 'http' in '/home/basti/Desktop/activate/kolor-ui/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 '/home/basti/Desktop/activate/kolor-ui/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 '/home/basti/Desktop/activate/kolor-ui/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 }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 43:10-24

Module not found: Error: Can't resolve 'url' in '/home/basti/Desktop/activate/kolor-ui/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: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }

[luu-alex]

Hey thanks for creating this issue.
@yieniggu are you also running the same command npx create-react-app?

[thedarkknight197]

Hey thanks for creating this issue.
@yieniggu are you also running the same command npx create-react-app?

Thank you for read about it. It’s very strange error. I think is an issue between latest version of React and webpack and the latest version of library

[luu-alex]

@thedarkknight197
Yes it seems like, the latest version of create-react-app has upgraded their webpack version and is missing a few modules required for web3js. I'll investigate this, thanks for bringing this to our attention 😃
There was a similar issue and a solution with Angular when they upgraded to webpack 5 #4070

[Drakenwolf]

Same issue here:(

[yieniggu]

Hey thanks for creating this issue. @yieniggu are you also running the same command npx create-react-app?

yes, using create-react-app, was able to run the dev server by installing react-app-rewired and overridong some webpack config

[mseemann]

my workaround is:

• install react-app-rewired (yarn add -dev react-app-rewired)
• create a file config-overrides.js and add the following content:

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url")
    })
    config.resolve.fallback = fallback;

    return config;
}

the packages need to be added (yarn add --dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url)

• also a polyfill is required. I created a file polyfill.ts (could also be js) with the following content:

import { Buffer } from 'buffer';

(window as any).global = window;
global.Buffer = Buffer;
global.process = {
    env: { DEBUG: undefined },
    version: '',
    nextTick: require('next-tick')
} as any;

• import the polyfill in your index.tsx (import './polyfill')

• last step: instead of
  "start": "react-scripts start"
  use:
  "start": "react-app-rewired start"

More info here: https://github.com/ChainSafe/web3.js#trouble-shooting-and-known-issues

[thedarkknight197]

For my project already started how can i migrate to it? I will create a new project? @mseemann

[mseemann]

For my project already started how can i migrate to it? I will create a new project? @mseemann

@thedarkknight197 the steps i have described were also on a new created project with npx create-react-app.

[luu-alex]

@mseemann awesome workaround for people running with yarn.
just to add on top of this, if you would like to use the other script commands in package.json change the rest of react-scripts to react-app-rewired and if you want to use polyfill.js (think you might get errors though) instead of polyfill.ts use:

import { Buffer } from 'buffer';

window.global = window;
global.Buffer = Buffer;
global.process = {
    env: { DEBUG: undefined },
    version: '',
    nextTick: require('next-tick')
};

[thedarkknight197]

• rewired

So i can use npm in my proget already started with:

npm install --save-dev react-app-rewired

Right?

[luu-alex]

@thedarkknight197 yes

[thedarkknight197]

In js in polyfill i need to remove the "as any" directive, but now i have this error:

Compiled with problems:X

ERROR in ./src/polyfill.js 3:0-32

Module not found: Error: Can't resolve 'buffer' in '/src'

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


ERROR in ./node_modules/browserify-sign/node_modules/safe-buffer/index.js 4:13-30

I will try to add it

[thedarkknight197]

Nothing:
i do npm install --save-dev buffer,
but my console of chrome told to me:

Uncaught ReferenceError: Buffer is not defined
    at varintEncode (util.js:33)
    at Object../node_modules/multicodec/src/varint-table.js (varint-table.js:11)
    at Object.options.factory (react refresh:6)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../node_modules/multicodec/src/index.js (index.js:16)
    at Object.options.factory (react refresh:6)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../node_modules/content-hash/src/index.js (index.js:19)

My terminal:

Failed to parse source map from '/node_modules/xhr2-cookies/xml-http-request-upload.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/xml-http-request-upload.ts'
 @ ./node_modules/xhr2-cookies/dist/xml-http-request.js 51:32-68
 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
 @ ./src/pages/Profile/index.js 11:0-24
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 7:0-24 17:37-40

WARNING in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/xhr2-cookies/xml-http-request.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/xml-http-request.ts'
 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
 @ ./src/pages/Profile/index.js 11:0-24
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 7:0-24 17:37-40

[luu-alex]

@thedarkknight197 do you have import './polyfill.js'; in your index.js? that buffer error should be gone. you will get warnings in your terminal, but it will still build succesfully

[thedarkknight197]

I insert import './polyfill' how is told by @mseemann

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";
import {UserContextProvider} from './store/user-context'
import './polyfill'

[thedarkknight197]

if i move the import of polyfill on firstline of file index.js the site now is visible.

But in my terminal this message don't go away:

WARNING in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/xhr2-cookies/xml-http-request.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/xml-http-request.ts'
 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
 @ ./src/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40  

[thedarkknight197]

The full console errors:

Compiled with warnings.

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/_version.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/_version.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/abi-coder.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/abi-coder.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/abstract-coder.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/abstract-coder.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/address.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/address.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/anonymous.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/anonymous.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/array.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/array.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/boolean.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/boolean.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/bytes.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/bytes.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/fixed-bytes.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/fixed-bytes.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/null.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/null.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/number.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/number.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/string.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/string.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/tuple.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/tuple.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/fragments.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/fragments.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/index.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/index.ts'

Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/interface.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/interface.ts'

Failed to parse source map from '/node_modules/@ethersproject/signing-key/lib.esm/browser-elliptic.js.map' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/signing-key/lib.esm/browser-elliptic.js.map'

Failed to parse source map from '/node_modules/rlp/src/index.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/rlp/src/index.ts'

Failed to parse source map from '/node_modules/xhr2-cookies/errors.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/errors.ts'

Failed to parse source map from '/node_modules/xhr2-cookies/index.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/index.ts'

Failed to parse source map from '/node_modules/xhr2-cookies/progress-event.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/progress-event.ts'

Failed to parse source map from '/node_modules/xhr2-cookies/xml-http-request-event-target.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/xml-http-request-event-target.ts'

Failed to parse source map from '/node_modules/xhr2-cookies/xml-http-request-upload.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/xml-http-request-upload.ts'

Failed to parse source map from '/node_modules/xhr2-cookies/xml-http-request.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/xml-http-request.ts'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

asset static/js/bundle.js 6.09 MiB [emitted] (name: main) 1 related asset
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 190 bytes [emitted]
cached modules 5.74 MiB [cached] 652 modules
runtime modules 28.3 KiB 15 modules

WARNING in ./node_modules/@ethersproject/abi/lib.esm/_version.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/_version.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/_version.ts'
 @ ./node_modules/@ethersproject/abi/lib.esm/fragments.js 6:0-37 7:26-33
 @ ./node_modules/@ethersproject/abi/lib.esm/index.js 3:0-117 6:0-204 6:0-204 6:0-204 6:0-204 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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/abi-coder.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/abi-coder.ts'
 @ ./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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/abi/lib.esm/coders/abstract-coder.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/abstract-coder.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/abstract-coder.ts'
 @ ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js 8:0-57 87:15-21 91:15-21
 @ ./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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/abi/lib.esm/coders/address.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/address.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/address.ts'
 @ ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js 9:0-48 30:19-31
 @ ./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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/abi/lib.esm/coders/anonymous.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/anonymous.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/anonymous.ts'
 @ ./node_modules/@ethersproject/abi/lib.esm/coders/array.js 7:0-45 215:22-36
 @ ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js 10:0-44 42:19-29
 @ ./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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/abi/lib.esm/coders/array.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/array.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/array.ts'
 @ ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js 10:0-44 42:19-29
 @ ./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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/abi/lib.esm/coders/boolean.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/boolean.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/boolean.ts'
 @ ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js 11:0-48 33:19-31
 @ ./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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/abi/lib.esm/coders/bytes.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/bytes.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/bytes.ts'
 @ ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js 12:0-44 39:19-29
 @ ./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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

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 '/node_modules/@ethersproject/abi/src.ts/coders/fixed-bytes.ts' file: Error: ENOENT: no such file or directory, open '/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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

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 '/node_modules/@ethersproject/abi/src.ts/coders/null.ts' file: Error: ENOENT: no such file or directory, open '/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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/abi/lib.esm/coders/number.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/number.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/number.ts'
 @ ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js 15:0-46 63:17-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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/abi/lib.esm/coders/string.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/string.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/string.ts'
 @ ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js 16:0-46 36:19-30
 @ ./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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/abi/lib.esm/coders/tuple.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/coders/tuple.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/coders/tuple.ts'
 @ ./node_modules/@ethersproject/abi/lib.esm/abi-coder.js 17:0-44 45:19-29 109:22-32 119:22-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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/abi/lib.esm/fragments.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/fragments.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/fragments.ts'
 @ ./node_modules/@ethersproject/abi/lib.esm/index.js 3:0-117 6:0-204 6:0-204 6:0-204 6:0-204 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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/abi/lib.esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/index.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/index.ts'
 @ ./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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/abi/lib.esm/interface.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/abi/src.ts/interface.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/abi/src.ts/interface.ts'
 @ ./node_modules/@ethersproject/abi/lib.esm/index.js 5:0-108 6:0-204 6:0-204 6:0-204 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/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/@ethersproject/signing-key/lib.esm/elliptic.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@ethersproject/signing-key/lib.esm/browser-elliptic.js.map' file: Error: ENOENT: no such file or directory, open '/node_modules/@ethersproject/signing-key/lib.esm/browser-elliptic.js.map'
 @ ./node_modules/@ethersproject/signing-key/lib.esm/index.js 3:0-32 13:17-19
 @ ./node_modules/@ethersproject/transactions/lib.esm/index.js 10:0-80 74:20-36 78:24-40
 @ ./node_modules/web3-core-method/lib/index.js 36:29-67
 @ ./node_modules/web3-eth/lib/index.js 31:13-40
 @ ./node_modules/web3/lib/index.js 34:10-29
 @ ./src/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/rlp/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/rlp/src/index.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/rlp/src/index.ts'
 @ ./node_modules/ethereumjs-util/dist.browser/account.js 75:23-37
 @ ./node_modules/ethereumjs-util/dist.browser/index.js 35:13-33
 @ ./node_modules/web3-utils/lib/utils.js 29:21-47
 @ ./node_modules/web3-utils/lib/index.js 26:12-33
 @ ./node_modules/web3/lib/index.js 44:12-33
 @ ./src/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/xhr2-cookies/dist/errors.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/xhr2-cookies/errors.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/errors.ts'
 @ ./node_modules/xhr2-cookies/dist/xml-http-request.js 47:15-34
 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
 @ ./src/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/xhr2-cookies/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/xhr2-cookies/index.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/index.ts'
 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
 @ ./src/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/xhr2-cookies/dist/progress-event.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/xhr2-cookies/progress-event.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/progress-event.ts'
 @ ./node_modules/xhr2-cookies/dist/xml-http-request.js 45:23-50
 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
 @ ./src/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/xhr2-cookies/dist/xml-http-request-event-target.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/xhr2-cookies/xml-http-request-event-target.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/xml-http-request-event-target.ts'
 @ ./node_modules/xhr2-cookies/dist/index.js 13:38-80
 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
 @ ./src/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/xhr2-cookies/dist/xml-http-request-upload.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/xhr2-cookies/xml-http-request-upload.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/xml-http-request-upload.ts'
 @ ./node_modules/xhr2-cookies/dist/xml-http-request.js 51:32-68
 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
 @ ./src/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

WARNING in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/xhr2-cookies/xml-http-request.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/xml-http-request.ts'
 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
 @ ./src/pages/Profile/index.js 11:0-24 19:14-18
 @ ./src/routes/Router.js 10:0-39 32:17-24 46:17-24
 @ ./src/App.js 6:0-37 12:35-41
 @ ./src/index.js 8:0-24 17:37-40

24 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.65.0 compiled with 24 warnings in 1620 ms

[luu-alex]

Glad the page has loaded and built succesfully, I'll see if theres anything that can be done about this warnings.

[thedarkknight197]

Glad the page has loaded and built succesfully, I'll see if theres anything that can be done about this warnings.

thank you so much... I will wait any news, thank you for your patience

[mseemann]

@luu-alex, @thedarkknight197 to disable the warning you can add config.ignoreWarnings = [/Failed to parse source map/];in the config-overrides.js file.

[thedarkknight197]

Great it work! :D

[nazarhussain]

Hi @thedarkknight197 Based on above discussion and specially #4659 (comment) it seems the issue is resolved. Probably its because the latest Webpack does not ship the NodeJS polyflils by default.

As we are focused on 4.x rewrite right now, we try to re-evaluate the latest react and other frameworks support for that release. For now I am closing this issue.

If you think some points are left unresolved, feel free to reopen the issue.

[luu-alex]

https://github.com/ChainSafe/web3.js#web3-and-create-react-app
the solution getting web3 and react to work is now posted in the github repo.

Thanks everyone :)

[mega0319]

just re-affirming the latest solution posted on the github repo works!

[goyalk130]

still having same error
even after doing each and every step

[luu-alex]

#4767

[tbhaxor]

Is there any workaround for vuejs applications? I am still getting this issue

[tbhaxor]

Yeah, I got it working with vuejs. All good

[ChristianOConnor]

I'm having the same problem as described in this thread but with a vue/vuex app. Is there a workaround for vue? I see that the above workarounds all involve installing react-app-rewired which I believe is incompatible with vue.

[tbhaxor]

I'm having the same problem as described in this thread but with a vue/vuex app. Is there a workaround for vue? I see that the above workarounds all involve installing react-app-rewired which I believe is incompatible with vue.

Yes, I have created a sample application in vuejs and web3. Check this, specifically vue.config.js file

https://github.com/tbhaxor/Ellet

[ChristianOConnor]

I'm having the same problem as described in this thread but with a vue/vuex app. Is there a workaround for vue? I see that the above workarounds all involve installing react-app-rewired which I believe is incompatible with vue.

Yes, I have created a sample application in vuejs and web3. Check this, specifically vue.config.js file

https://github.com/tbhaxor/Ellet

Oh perfect this worked! Thanks!

[ammarqureshi10]

webpack 5.65.0 compiled with 24 warnings in 1620 ms

Please share the js version of polyfill.ts

[thellecodes]

https://github.com/ChainSafe/web3.js#web3-and-create-react-app the solution getting web3 and react to work is now posted in the github repo.

Thanks everyone :)

Perfect

[pajacobjean]

Failed to compile.

Error in ./src/index.js
Module not found: 'react/client' in D:\j23\moz-todo-react\src

@ ./src/index.js 14:14-37

[pajacobjean]

Failed to compile.

Error in ./src/index.js
Module not found: 'react/client' in D:\j23\moz-todo-react\src

@ ./src/index.js 16:14-37

[apeNote]

same issue

[vitpankin]

same again

[luu-alex]

Hey there, sorry for the long wait but we are coming up with a permanent solution. Pr has been created, thanks everyone

[gmako6]

when polyfill file is created and imported on index.js/ts

import { Buffer } from 'buffer';

(window as any).global = window;
global.Buffer = Buffer;
global.process = {
env: { DEBUG: undefined },
version: '',
nextTick: require('next-tick')
} as any;

it comes with this error

ERROR in ./src/polyfill.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Volumes/Gmako-DATA/SafeCode/Solidity_Web3_Training/nftmint/src/polyfill.js: Unexpected token, expected "," (3:8)

1 | import { Buffer } from 'buffer';
2 |

3 | (window as any).global = window;
| ^
4 | global.Buffer = Buffer;
5 | global.process = {
6 | env: { DEBUG: undefined },
at instantiate (/Volumes/Gmako-DATA/SafeCode/Solidity_Web3_Training/nftmint/node_modules/@babel/parser/lib/index.js:72:32)
at constructor (/Volumes/Gmako-DATA/SafeCode/Solidity_Web3_Training/nftmint/node_modules/@babel/parser/lib/index.js:366:12)
at FlowParserMixin.raise (/Volumes/Gmako-DATA/SafeCode/Solidity_Web3_Training/nftmint/node_modules/@babel/parser/lib/index.js:3453:19)
at FlowParserMixin.unexpected (/Volumes/Gmako-DATA/SafeCode/Solidity_Web3_Training/nftmint/node_modules/@babel/parser/lib/index.js:3491:16)
at FlowParserMixin.expect (/Volumes/Gmako-DATA/SafeCode/Solidity_Web3_Training/nftmint/node_modules/@babel/parser/lib/index.js:4128:28)
at FlowParserMixin.parseParenAndDistinguishExpression (/Volumes/Gmako-DATA/SafeCode/Solidity_Web3_Training/nftmint/node_modules/@babel/parser/lib/index.js:13523:14)
at FlowParserMixin.parseParenAndDistinguishExpression (/Volumes/Gmako-DATA/SafeCode/Solidity_Web3_Training/nftmint/node_modules/@babel/parser/lib/index.js:6844:18)
at FlowParserMixin.parseExprAtom (/Volumes/Gmako-DATA/SafeCode/Solidity_Web3_Training/nftmint/node_modules/@babel/parser/lib/index.js:13113:23)
at FlowParserMixin.parseExprAtom (/Volumes/Gmako-DATA/SafeCode/Solidity_Web3_Training/nftmint/node_modules/@babel/parser/lib/index.js:8174:20)
at FlowParserMixin.parseExprSubscripts (/Volumes/Gmako-DATA/SafeCode/Solidity_Web3_Training/nftmint/node_modules/@babel/parser/lib/index.js:12785:23)

[luu-alex]

@gmako6 Hi, we have a fix for this in the next version but if you want to get it working now you can use this. You dont need the polyfill file for this method. within your project, go to your node_modules/web3/package.jsonand add "browser": "dist/web3.min.js" under main so it'll look like this:

    "main": "lib/index.js",
    "browser": "dist/web3.min.js",

save it and it should work

[simlevesque]

@luu-alex the issue is still present in every other packages, such as web3-eth-contract, web3-core, etc... importing those breaks React.

[luu-alex]

@simlevesque are you importing these packages seperately or through the web3 package

[salahkhl]

I succeed to solve the problem by following those steps:

Uninstall Webpack 5: npm uninstall webpack

delete package-lock.json

Go to package.json and change from "React-scripts": "5.0.0" to "React-scripts": "4.0.3",

install webpack 4: npm install webpack@4.44.2

npm install

npm run start

I hope it helps ;)

[charil10]

still not working. Tried every solution above.
Does anyone have any other solution?
Web3 is not working with React

[salahkhl]

still not working. Tried every solution above. Does anyone have any other solution? Web3 is not working with React

Copy paste your package.json

[gmako6]

It's is best to use yarn according to my new experience it works smoothly 🫡

[raiabdullahbashir]

ERROR in ./node_modules/dotenv/lib/main.js 24:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\raiab\Documents\Logics Yard\NFT code daniyal\NFT code\node_modules\dotenv\lib'

ERROR in ./node_modules/eth-lib/lib/bytes.js 7:193-227
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\raiab\Documents\Logics Yard\NFT code daniyal\NFT code\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/swarm-js/node_modules/eth-lib/lib/bytes.js 9:193-227
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\raiab\Documents\Logics Yard\NFT code daniyal\NFT code\node_modules\swarm-js\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-shh/node_modules/web3-providers-http/lib/index.js 28:11-26
Module not found: Error: Can't resolve 'http' in 'C:\Users\raiab\Documents\Logics Yard\NFT code daniyal\NFT code\node_modules\web3-shh\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-shh/node_modules/web3-providers-http/lib/index.js 30:12-28
Module not found: Error: Can't resolve 'https' in 'C:\Users\raiab\Documents\Logics Yard\NFT code daniyal\NFT code\node_modules\web3-shh\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/web3/node_modules/web3-eth-accounts/lib/index.js 31:74-91
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\raiab\Documents\Logics Yard\NFT code daniyal\NFT code\node_modules\web3\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/node_modules/web3-providers-http/lib/index.js 28:11-26
Module not found: Error: Can't resolve 'http' in 'C:\Users\raiab\Documents\Logics Yard\NFT code daniyal\NFT code\node_modules\web3\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/node_modules/web3-providers-http/lib/index.js 30:12-28
Module not found: Error: Can't resolve 'https' in 'C:\Users\raiab\Documents\Logics Yard\NFT code daniyal\NFT code\node_modules\web3\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 }
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 }

webpack compiled with 10 errors and 80 warnings

[raiabdullahbashir]

{
"name": "gigaland",
"version": "0.1.0",
"private": true,
"homepage": "./",
"dependencies": {
"@alch/alchemy-web3": "^1.1.8",
"@reach/router": "^1.3.4",
"@tim-soft/react-spring-web": "^9.0.0-beta.36",
"axios": "^0.23.0",
"bignumber.js": "^9.0.2",
"bootstrap": "^5.1.1",
"buffer": "^6.0.3",
"color": "^4.2.3",
"cra-template": "1.1.2",
"crypto": "^1.0.1",
"dotenv": "^10.0.0",
"elegant-icons": "0.0.1",
"emailjs-com": "^3.2.0",
"et-line": "^1.0.1",
"ethers": "^5.7.1",
"font-awesome": "^4.7.0",
"fs": "^0.0.1-security",
"http": "^0.0.1-security",
"https": "^1.0.0",
"moment": "^2.29.1",
"opensea-js": "^1.2.7",
"os": "^0.1.2",
"path": "^0.12.7",
"react": "^17.0.2",
"react-awesome-reveal": "^3.8.1",
"react-bootstrap": "^1.6.3",
"react-cool-onclickoutside": "^1.6.2",
"react-dom": "^17.0.2",
"react-photo-gallery": "^8.0.0",
"react-pose": "^4.0.10",
"react-redux": "^7.2.5",
"react-scripts": "^5.0.1",
"react-select": "^4.3.1",
"react-slick": "^0.28.1",
"react-socks": "^2.2.0",
"react-spring-lightbox": "^1.6.0",
"react-tsparticles": "^1.34.0",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"sass": "^1.39.2",
"slick-carousel": "^1.8.1",
"stream": "^0.0.2",
"styled-components": "^5.3.1",
"typesafe-actions": "^5.1.0",
"web-vitals": "^2.1.0",
"web3": "^1.6.1",
"webpack": "^4.44.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"msw": "^0.35.0"
}
}

[luu-alex]

@raiabdullahbashir update web3 to 1.8, u are using 1.6.1

[raiabdullahbashir]

@luu-alex thank you but my issue was resolved by setting

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

to this

"scripts": {
"start": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
"build": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},