[Solved - issues with IPFS upload, my mistake] Play button not working with Spotify Clone

Moralis General
#1

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.

spotify issue
spotify issue1555×729 68.8 KB

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
Spotify Clone Compilation Errors
#2

I am having issues as well. Except it was not the button since it works on the tuttorial’s contract - I don’t get why did you switch to main net and matic instead of mumbai?

#3

Anybody have a solution here, please? I get the same warnings during the initial compilation.
Maybe an issue with prereqs (i.e., my stupidity?)
Thanks!
David

Failed to parse source map from '/Users/davidmacfadyen/Decentralized-Spotify/node_modules/@metamask/detect-provider/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/davidmacfadyen/Decentralized-Spotify/node_modules/@metamask/detect-provider/src/index.ts'

Module not found: Error: Can't resolve 'magic-sdk' in '/Users/davidmacfadyen/Decentralized-Spotify/node_modules/moralis/lib/browser/Web3Connector'

Module not found: Error: Can't resolve '@walletconnect/web3-provider' in '/Users/davidmacfadyen/Decentralized-Spotify/node_modules/moralis/lib/browser/Web3Connector'

Module not found: Error: Can't resolve '@web3auth/web3auth' in '/Users/davidmacfadyen/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

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.61 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.67 KiB **[emitted]**

asset **asset-manifest.json** 540 bytes **[emitted]**

cached modules 9.89 MiB (javascript) 36.7 KiB (asset) 31.5 KiB (runtime) **[cached]** 3306 modules

javascript modules 7.86 KiB

./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.14 KiB **[built]** **[2 warnings]**

./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.72 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 '/Users/davidmacfadyen/Decentralized-Spotify/node_modules/@metamask/detect-provider/src/index.ts' file:** **Error****: ENOENT: no such file or directory, open '/Users/davidmacfadyen/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 '/Users/davidmacfadyen/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 '/Users/davidmacfadyen/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 '/Users/davidmacfadyen/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

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 **7 warnings** in 3904 ms
#4

You can ignore these warnings (they’re quite common), the project should still work normally. The other warnings like autoprefixer: end value has mixed support, consider using flex-end instead can be fixed if you update these lines to flex-end.

1 Like