why when I successfully run the ethereum-boilerplate project I can’t click anything? is there something wrong with my install method? thank you
did you try inspect and check any error that you get?
@YosephKS Hi there guys I’m still not getting this right it seems. I have made it further however.
Please see the UI as it opens when clicking “go live” from VSC - though it did not work when trying with yarn start - errors still coming up.
I ran npm audit fix --force and then changed the react-scripts version back to 4.0.3 and ran yarn start again to get these errors in the browser:
Compiled with problems:X
ERROR in ./src/components/Account/WalletIcons/SafePal.svg
Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
6 | ...props
7 | }, svgRef) {
> 8 | return <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:version="1.0 (4035a4f, 2020-05-01)" sodipodi:docname="SafePal-SFP-Coin-Icon.svg" id="svg857" viewBox="0 0 256 256" height={256} width={256} ref={svgRef} aria-labelledby={titleId} {...props}><metadata id="metadata863"><rdf:RDF><cc:Work rdf:about=""><dc:format>{"image/svg+xml"}</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title>{"\u5F62\u72B6\u7ED3\u5408"}</dc:title></cc:Work></rdf:RDF></metadata><defs id="defs861"><linearGradient id="linearGradient1452" inkscape:collect="always"><stop id="stop1448" offset={0} style={{
| ^^^^^^^^
9 | stopColor: "#4a69fe",
10 | stopOpacity: 1
11 | }} /><stop id="stop1450" offset={1} style={{
at File.buildCodeFrameError (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\core\lib\transformation\file\file.js:249:12)
at NodePath.buildCodeFrameError (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\path\index.js:139:21)
at PluginPass.JSXNamespacedName (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\plugin-transform-react-jsx\lib\create-plugin.js:86:24)
at newFn (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\visitors.js:177:21)
at NodePath._call (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\path\context.js:53:20)
at NodePath.call (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\path\context.js:40:17)
at NodePath.visit (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\path\context.js:100:31)
at TraversalContext.visitQueue (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\context.js:103:16)
at TraversalContext.visitSingle (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\context.js:77:19)
at TraversalContext.visit (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\context.js:131:19)
ERROR in ./src/components/Account/WalletIcons/TokenPocket.svg
Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
6 | ...props
7 | }, svgRef) {
> 8 | return <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" sodipodi:docname="Token-Pocket-TPT-Coin-Icon-1000x1000.svg" inkscape:version="1.0 (4035a4f, 2020-05-01)" id="svg6883" viewBox="0 0 264.58334 264.58334" height="264.58334mm" width="264.58334mm" ref={svgRef} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs id="defs6877"><clipPath clipPathUnits="userSpaceOnUse" id="clipPath6239"><path d="m 356.5178,984 h -4.135 -11.3558 c -0.3301,0 -0.5977,-0.267 -0.5977,-0.5964 v -37.5693 c 0,-0.3296 0.2676,-0.5966 0.5977,-0.5966 h 10.7581 c 0.3301,0 0.5977,0.267 0.5977,0.5966 v 9.5413 h 4.135 c 7.9222,0 14.3442,6.4079 14.3442,14.3125 0,7.904 -6.422,14.3119 -14.3442,14.3119" clipRule="evenodd" id="path6237" /></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="clipPath6245"><path d="M 0,0 H 1225 V 4536 H 0 Z" id="path6243" /></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="clipPath6177"><path d="M 0,0 H 1225 V 4536 H 0 Z" id="path6175" /></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="clipPath6183"><path d="m 326,941 h 20 v 39 h -20 z" id="path6181" /></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="clipPath6187"><path d="m 326,979.8311 h 19.1639 v -38.791 H 326 Z" clipRule="evenodd" id="path6185" /></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="clipPath6191"><path d="m 325,940 h 21 v 40 h -21 z" id="path6189" /></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="clipPath6195"><path d="m 326,941 h 20 v 39 h -20 z" id="path6193" /></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="clipPath6199"><path d="m 345.1639,970.5173 h -1.3051 v 9.3138 H 326.599 c -0.3308,0 -0.5992,-0.2675 -0.5992,-0.5971 v -13.1291 c 0,-0.3296 0.2684,-0.5968 0.5992,-0.5968 h 6.5876 v -23.8714 c 0,-0.3296 0.2681,-0.5966 0.5989,-0.5966 h 10.7795 c 0.3308,0 0.5989,0.267 0.5989,0.5966 z" clipRule="evenodd" id="path6197" /></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="clipPath6203"><path d="m 325,941 h 21 v 39 h -21 z" id="path6201" /></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="clipPath6143"><path d="m 345.8705,999 c 19.8107,0 35.8705,-16.0598 35.8705,-35.8705 0,-19.8107 -16.0598,-35.8705 -35.8705,-35.8705 C 326.0598,927.259 310,943.3188 310,963.1295 310,982.9402 326.0598,999 345.8705,999 Z" clipRule="evenodd" id="path6141" /></clipPath><linearGradient x1={0} y1={0} x2={0} y2={1024} gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,-1,310,999)" id="linearGradient6157"><stop style={{
| ^^^^^^^^
9 | stopOpacity: 1,
10 | stopColor: "#2bafff"
11 | }} offset={0} id="stop6153" /><stop style={{
at File.buildCodeFrameError (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\core\lib\transformation\file\file.js:249:12)
at NodePath.buildCodeFrameError (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\path\index.js:139:21)
at PluginPass.JSXNamespacedName (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\plugin-transform-react-jsx\lib\create-plugin.js:86:24)
at newFn (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\visitors.js:177:21)
at NodePath._call (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\path\context.js:53:20)
at NodePath.call (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\path\context.js:40:17)
at NodePath.visit (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\path\context.js:100:31)
at TraversalContext.visitQueue (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\context.js:103:16)
at TraversalContext.visitSingle (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\context.js:77:19)
at TraversalContext.visit (C:\Users\fille\ethereum-boilerplate\node_modules\@babel\traverse\lib\context.js:131:19)
ERROR in ./node_modules/cipher-base/index.js 3:16-43
Module not found: Error: Can't resolve 'stream' in 'C:\Users\fille\ethereum-boilerplate\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/ethereumjs-abi/node_modules/ethereumjs-util/dist/account.js 8:13-30
Module not found: Error: Can't resolve 'assert' in 'C:\Users\fille\ethereum-boilerplate\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\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: { "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-abi/node_modules/ethereumjs-util/dist/object.js 8:13-30
Module not found: Error: Can't resolve 'assert' in 'C:\Users\fille\ethereum-boilerplate\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\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: { "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/index.js 17:13-30
Module not found: Error: Can't resolve 'assert' in 'C:\Users\fille\ethereum-boilerplate\node_modules\ethereumjs-util\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: { "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/hash-base/node_modules/readable-stream/lib/_stream_readable.js 46:13-37
Module not found: Error: Can't resolve 'buffer' in 'C:\Users\fille\ethereum-boilerplate\node_modules\hash-base\node_modules\readable-stream\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: { "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/hash-base/node_modules/readable-stream/lib/_stream_writable.js 70:13-37
Module not found: Error: Can't resolve 'buffer' in 'C:\Users\fille\ethereum-boilerplate\node_modules\hash-base\node_modules\readable-stream\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: { "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/hash-base/node_modules/readable-stream/lib/internal/streams/buffer_list.js 74:15-32
Module not found: Error: Can't resolve 'buffer' in 'C:\Users\fille\ethereum-boilerplate\node_modules\hash-base\node_modules\readable-stream\lib\internal\streams'
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/keccak/node_modules/readable-stream/lib/_stream_readable.js 46:13-37
Module not found: Error: Can't resolve 'buffer' in 'C:\Users\fille\ethereum-boilerplate\node_modules\keccak\node_modules\readable-stream\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: { "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/keccak/node_modules/readable-stream/lib/_stream_writable.js 70:13-37
Module not found: Error: Can't resolve 'buffer' in 'C:\Users\fille\ethereum-boilerplate\node_modules\keccak\node_modules\readable-stream\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: { "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/keccak/node_modules/readable-stream/lib/internal/streams/buffer_list.js 74:15-32
Module not found: Error: Can't resolve 'buffer' in 'C:\Users\fille\ethereum-boilerplate\node_modules\keccak\node_modules\readable-stream\lib\internal\streams'
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/ripemd160/index.js 3:13-37
Module not found: Error: Can't resolve 'buffer' in 'C:\Users\fille\ethereum-boilerplate\node_modules\ripemd160'
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/safe-buffer/index.js 4:13-30
Module not found: Error: Can't resolve 'buffer' in 'C:\Users\fille\ethereum-boilerplate\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 }
ERROR in ./node_modules/safe-event-emitter/index.js 1:13-28
Module not found: Error: Can't resolve 'util' in 'C:\Users\fille\ethereum-boilerplate\node_modules\safe-event-emitter'
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: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/string_decoder/index.js 21:13-37
Module not found: Error: Can't resolve 'buffer' in 'C:\Users\fille\ethereum-boilerplate\node_modules\string_decoder'
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/web3-provider-engine/index.js 3:17-41
Module not found: Error: Can't resolve 'util' in 'C:\Users\fille\ethereum-boilerplate\node_modules\web3-provider-engine'
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: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/web3-provider-engine/subproviders/fixture.js 1:17-41
Module not found: Error: Can't resolve 'util' in 'C:\Users\fille\ethereum-boilerplate\node_modules\web3-provider-engine\subproviders'
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: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/web3-provider-engine/subproviders/hooked-wallet.js 12:17-41
Module not found: Error: Can't resolve 'util' in 'C:\Users\fille\ethereum-boilerplate\node_modules\web3-provider-engine\subproviders'
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: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/web3-provider-engine/subproviders/nonce-tracker.js 1:17-41
Module not found: Error: Can't resolve 'util' in 'C:\Users\fille\ethereum-boilerplate\node_modules\web3-provider-engine\subproviders'
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: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/web3-provider-engine/util/stoplight.js 3:17-41
Module not found: Error: Can't resolve 'util' in 'C:\Users\fille\ethereum-boilerplate\node_modules\web3-provider-engine\util'
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: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26
Module not found: Error: Can't resolve 'http' in 'C:\Users\fille\ethereum-boilerplate\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 'C:\Users\fille\ethereum-boilerplate\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 'C:\Users\fille\ethereum-boilerplate\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 'C:\Users\fille\ethereum-boilerplate\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 }
Could you show me your package.json file. Especially where the react-scripts version is shown? This is a webpack error and most likely than not it is because of the react-scripts version being used.
Thanks
Here below is the file - also so you are aware I deleted the eslint files as it was suggested.
{
"name": "ethereum-boilerplate",
"version": "0.1.0",
"dependencies": {
"@ant-design/icons": "^4.7.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@walletconnect/web3-provider": "^1.6.6",
"antd": "^4.16.13",
"magic-sdk": "7.0.0",
"moralis": "^1.3.1",
"react": "^17.0.2",
"react-blockies": "^1.4.1",
"react-dom": "^17.0.2",
"react-final-form": "^6.5.8",
"react-moralis": "^1.2.1",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-scripts": "^4.0.3",
"web-vitals": "^1.0.1",
"yarn": "^1.22.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"devchain": "node Truffle/scripts/devChain.js",
"connect": "moralis-admin-cli connect-local-devchain",
"watch:events": "moralis-admin-cli add-contract",
"deploy": "node Truffle/scripts/deployContract.js",
"deploypage": "gh-pages -d build",
"clean": "npx gh-pages-clean",
"lint:check": "eslint .",
"lint:fix": "eslint --fix",
"prettier:check": "prettier --check .",
"prettier:fix": "prettier --write \"**/*.{js,jsx,ts,tsx,css,md,json,html}\" .prettierrc --config ./.prettierrc",
"format": "npm run lint:fix && npm run prettier:fix",
"prepare": "husky install"
},
"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": {
"eslint": "^7.11.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"gh-pages": "^3.2.3",
"husky": "^7.0.0",
"prettier": "^2.5.1"
}
}
you still get the same issue man? 
@YosephKS Yes it seems there is some problem either with my local setup or my understanding the boilerplate setup.