I’m having some difficulties with implementing the Moralis Web3 API in the decentralized spotify app.
This is what I’m doing:
1 add server URI and App Id to the index.js file,
2. changing chain ID to matic in useAlbum.js
3. removed const = bear part and changed opensea link to mainnet in Album.js
4. create new object in helper file Albumlist.js like this
{
title: "1st AUNS album",
image:
“https://ipfs.moralis.io:2053/ipfs/QmYNB5ytWwDBQ3inBFu1KcUw9Wpt8G6HXAWD64AqxRdTX7/media/2”,
contract: "0xa4741be415edfc196c361151ccb4db21ad9ab2be",
}
when I run yarn start the app opens and the Album shows up with the 2 songs. when I click the opensea button it takes me to the NFT on the mainnet. But when I press play, nothing happens.
Here the warnings I get when compiling:
Compiled with warnings.
Failed to parse source map from 'C:\AUNSStreaming\Decentralized-Spotify\node_modules\@metamask\detect-provider\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\AUNSStreaming\Decentralized-Spotify\node_modules\@metamask\detect-provider\src\index.ts'
Module not found: Error: Can't resolve 'magic-sdk' in 'C:\AUNSStreaming\Decentralized-Spotify\node_modules\moralis\lib\browser\Web3Connector'
Module not found: Error: Can't resolve '@walletconnect/web3-provider' in 'C:\AUNSStreaming\Decentralized-Spotify\node_modules\moralis\lib\browser\Web3Connector'
Module not found: Error: Can't resolve '@web3auth/web3auth' in 'C:\AUNSStreaming\Decentralized-Spotify\node_modules\moralis\lib\browser\Web3Connector'
Warning
(11:5) autoprefixer: end value has mixed support, consider using flex-end instead
Warning
(17:5) autoprefixer: end value has mixed support, consider using flex-end instead
Warning
(96:5) autoprefixer: start value has mixed support, consider using flex-start instead
src\hooks\useAlbum.js
Line 16:6: React Hook useEffect has a missing dependency: 'fetchAlbum'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src\pages\Album.js
Line 8:7: 'bears' is assigned a value but never used no-unused-vars
Line 97:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
assets by path static/ 7.65 MiB
asset static/js/bundle.js 7.6 MiB [emitted] (name: main) 1 related asset
asset static/media/Spotify.9816e42b058c64fe305f.png 36.7 KiB [emitted] [immutable] [from: src/images/Spotify.png] (auxiliary name: main)
asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.93 KiB [emitted] 1 related asset
asset index.html 1.71 KiB [emitted]
asset asset-manifest.json 540 bytes [emitted]
cached modules 9.87 MiB (javascript) 36.7 KiB (asset) [cached] 3287 modules
runtime modules 31.5 KiB 17 modules
javascript modules 19 KiB
modules by path ./src/pages/ 14.3 KiB
./src/pages/Album.js 8.7 KiB [built]
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/pages/Album.css 5.56 KiB [built] [2 warnings]
./src/hooks/useAlbum.js 1.75 KiB [built]
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/components/AudioPlayer.css 2.96 KiB [built] [1 warning]
WARNING in ./node_modules/@metamask/detect-provider/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\AUNSStreaming\Decentralized-Spotify\node_modules\@metamask\detect-provider\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\AUNSStreaming\Decentralized-Spotify\node_modules\@metamask\detect-provider\src\index.ts'
@ ./node_modules/moralis/lib/browser/MoralisWeb3.js 97:45-81
@ ./node_modules/moralis/lib/browser/Parse.js 45:42-66
@ ./node_modules/moralis/index.js 1:0-50
@ ./node_modules/react-moralis/lib/index.esm.js 3:0-36 5348:11-24
@ ./src/index.js 10:0-48 13:33-48
WARNING in ./node_modules/moralis/lib/browser/Web3Connector/MagicWeb3Connector.js 175:38-58
Module not found: Error: Can't resolve 'magic-sdk' in 'C:\AUNSStreaming\Decentralized-Spotify\node_modules\moralis\lib\browser\Web3Connector'
@ ./node_modules/moralis/lib/browser/MoralisWeb3.js 99:49-94
@ ./node_modules/moralis/lib/browser/Parse.js 45:42-66
@ ./node_modules/moralis/index.js 1:0-50
@ ./node_modules/react-moralis/lib/index.esm.js 3:0-36 5348:11-24
@ ./src/index.js 10:0-48 13:33-48
WARNING in ./node_modules/moralis/lib/browser/Web3Connector/WalletConnectWeb3Connector.js 153:54-93
Module not found: Error: Can't resolve '@walletconnect/web3-provider' in 'C:\AUNSStreaming\Decentralized-Spotify\node_modules\moralis\lib\browser\Web3Connector'
@ ./node_modules/moralis/lib/browser/MoralisWeb3.js 87:57-110
@ ./node_modules/moralis/lib/browser/Parse.js 45:42-66
@ ./node_modules/moralis/index.js 1:0-50
@ ./node_modules/react-moralis/lib/index.esm.js 3:0-36 5348:11-24
@ ./src/index.js 10:0-48 13:33-48
WARNING in ./node_modules/moralis/lib/browser/Web3Connector/Web3AuthConnector.js 132:40-69
Module not found: Error: Can't resolve '@web3auth/web3auth' in 'C:\AUNSStreaming\Decentralized-Spotify\node_modules\moralis\lib\browser\Web3Connector'
@ ./node_modules/moralis/lib/browser/MoralisWeb3.js 101:25-69
@ ./node_modules/moralis/lib/browser/Parse.js 45:42-66
@ ./node_modules/moralis/index.js 1:0-50
@ ./node_modules/react-moralis/lib/index.esm.js 3:0-36 5348:11-24
@ ./src/index.js 10:0-48 13:33-48
WARNING in ./src/components/AudioPlayer.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/components/AudioPlayer.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(11:5) autoprefixer: end value has mixed support, consider using flex-end instead
@ ./src/components/AudioPlayer.css 8:6-277 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-247 83:0-247 84:22-29 84:33-47 84:50-64 61:4-74:5
@ ./src/components/AudioPlayer.js 9:0-27
@ ./src/App.js 13:0-46 170:51-57
@ ./src/index.js 7:0-24 17:37-40
WARNING in ./src/pages/Album.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/pages/Album.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(17:5) autoprefixer: end value has mixed support, consider using flex-end instead
@ ./src/pages/Album.css 8:6-271 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-241 83:0-241 84:22-29 84:33-47 84:50-64 61:4-74:5
@ ./src/pages/Album.js 9:0-21
@ ./src/App.js 10:0-34 142:44-49
@ ./src/index.js 7:0-24 17:37-40
WARNING in ./src/pages/Album.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/pages/Album.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(96:5) autoprefixer: start value has mixed support, consider using flex-start instead
@ ./src/pages/Album.css 8:6-271 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-241 83:0-241 84:22-29 84:33-47 84:50-64 61:4-74:5
@ ./src/pages/Album.js 9:0-21
@ ./src/App.js 10:0-34 142:44-49
@ ./src/index.js 7:0-24 17:37-40
WARNING in src\hooks\useAlbum.js
Line 16:6: React Hook useEffect has a missing dependency: 'fetchAlbum'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src\pages\Album.js
Line 8:7: 'bears' is assigned a value but never used no-unused-vars
Line 97:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
4 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.68.0 compiled with 8 warnings in 6799 ms