Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web3 don't work with latest of React #4659

Closed
1 task done
thedarkknight197 opened this issue Dec 30, 2021 · 54 comments · Fixed by #4670
Closed
1 task done

Web3 don't work with latest of React #4659

thedarkknight197 opened this issue Dec 30, 2021 · 54 comments · Fixed by #4670
Labels
1.x 1.0 related issues Bug Addressing a bug

Comments

@thedarkknight197
Copy link

thedarkknight197 commented Dec 30, 2021

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

@thedarkknight197 thedarkknight197 added the Bug Addressing a bug label Dec 30, 2021
@yieniggu
Copy link

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
Copy link
Contributor

luu-alex commented Jan 1, 2022

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

@thedarkknight197
Copy link
Author

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
Copy link
Contributor

luu-alex commented Jan 2, 2022

@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

@luu-alex luu-alex added the 1.x 1.0 related issues label Jan 2, 2022
@Drakenwolf
Copy link

Same issue here:(

@yieniggu
Copy link

yieniggu commented Jan 3, 2022

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
Copy link

mseemann commented Jan 4, 2022

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
Copy link
Author

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

@mseemann
Copy link

mseemann commented Jan 5, 2022

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
Copy link
Contributor

luu-alex commented Jan 5, 2022

@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
Copy link
Author

thedarkknight197 commented Jan 5, 2022

  • rewired

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

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

Right?

@luu-alex
Copy link
Contributor

luu-alex commented Jan 5, 2022

@thedarkknight197 yes

@thedarkknight197
Copy link
Author

thedarkknight197 commented Jan 5, 2022

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
Copy link
Author

thedarkknight197 commented Jan 5, 2022

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
Copy link
Contributor

luu-alex commented Jan 5, 2022

@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
Copy link
Author

thedarkknight197 commented Jan 5, 2022

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
Copy link
Author

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
Copy link
Author

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
Copy link
Contributor

luu-alex commented Jan 5, 2022

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

@thedarkknight197
Copy link
Author

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
Copy link

mseemann commented Jan 6, 2022

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

@thedarkknight197
Copy link
Author

Great it work! :D

@nazarhussain
Copy link
Contributor

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
Copy link
Contributor

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
Copy link

mega0319 commented Feb 6, 2022

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

@goyalk130
Copy link

still having same error
even after doing each and every step

@luu-alex
Copy link
Contributor

luu-alex commented Feb 22, 2022

#4767

@tbhaxor
Copy link

tbhaxor commented Mar 3, 2022

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

@tbhaxor
Copy link

tbhaxor commented Mar 4, 2022

Yeah, I got it working with vuejs. All good

@ChristianOConnor
Copy link

ChristianOConnor commented Mar 12, 2022

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
Copy link

tbhaxor commented Mar 12, 2022

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
Copy link

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
Copy link

webpack 5.65.0 compiled with 24 warnings in 1620 ms

Please share the js version of polyfill.ts

@thellecodes
Copy link

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
Copy link

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
Copy link

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
Copy link

apeNote commented Jul 17, 2022

same issue

@vitpankin
Copy link

same again

@luu-alex
Copy link
Contributor

luu-alex commented Jul 21, 2022

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

@gmako6
Copy link

gmako6 commented Aug 14, 2022

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
Copy link
Contributor

@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
Copy link

@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
Copy link
Contributor

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

@salahkhl
Copy link

salahkhl commented Aug 30, 2022

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
Copy link

charil10 commented Sep 1, 2022

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

@salahkhl
Copy link

salahkhl commented Sep 1, 2022

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

Copy paste your package.json

@jdevcs jdevcs mentioned this issue Sep 8, 2022
@gmako6
Copy link

gmako6 commented Sep 10, 2022

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

@raiabdullahbashir
Copy link

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
Copy link

{
"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
Copy link
Contributor

luu-alex commented Oct 4, 2022

@raiabdullahbashir update web3 to 1.8, u are using 1.6.1

@raiabdullahbashir
Copy link

@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"
},

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1.x 1.0 related issues Bug Addressing a bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.