Spotify Clone Compilation Errors

[davidmacfadyen]

Anybody have a solution here, please ? I get the warnings below during the initial compilation.
Maybe an issue with prereqs (i.e., my stupidity?)
I see a related issue at the link below, but despite the post listed as “Solved” I don’t see how/whether the matter was resolved. Seemingly not…!

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

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”, …

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

[cryptokid]

the first 3 warnings are from magic-sdk, walletconnect and web3auth that are optional dependencies

if the project works will all those working, then you can ignore them

[davidmacfadyen]

thank you!
I will look into how to install them all, just in case

[alex]

If you install the magic/web3auth/walletconnect packages you may have to make other changes e.g. change to a different webpack/react-scripts version or configure polyfills. I wouldn’t worry about it unless you want to use one of those connection providers in this project.

[davidmacfadyen]

Thanks – it was just a bit disconcerting to see a three-foot ribbon of warnings five seconds after running yarn start…