Web3 don't work with latest of React

thedarkknight197 commented 2 years ago

Is there an existing issue for this?

[X] 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 commented 2 years ago

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 commented 2 years ago

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

thedarkknight197 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

Same issue here:(

yieniggu commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

mseemann commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

rewired

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

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

Right?

luu-alex commented 2 years ago

@thedarkknight197 yes

thedarkknight197 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

thedarkknight197 commented 2 years ago

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 commented 2 years ago

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

thedarkknight197 commented 2 years ago

Great it work! :D

nazarhussain commented 2 years ago

Hi @thedarkknight197 Based on above discussion and specially https://github.com/ChainSafe/web3.js/issues/4659#issuecomment-1006092709 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 commented 2 years ago

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 commented 2 years ago

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

goyalk130 commented 2 years ago

still having same error even after doing each and every step

luu-alex commented 2 years ago

https://github.com/ChainSafe/web3.js/issues/4767

tbhaxor commented 2 years ago

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

tbhaxor commented 2 years ago

Yeah, I got it working with vuejs. All good

ChristianOConnor commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

webpack 5.65.0 compiled with 24 warnings in 1620 ms

Please share the js version of polyfill.ts

thellecodes commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

same issue

vitpankin commented 2 years ago

same again

luu-alex commented 2 years ago

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

gmako6 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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

salahkhl commented 2 years ago

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 commented 2 years ago

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

salahkhl commented 2 years ago

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 commented 2 years ago

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

raiabdullahbashir commented 2 years ago

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 commented 2 years ago

{ "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 commented 2 years ago

@raiabdullahbashir update web3 to 1.8, u are using 1.6.1

web3 / web3.js