[SOLVED] Failed to Compile - @/styles/globals.css

[johnversus]

The error from metamask is expected due to APP_DOMAIN=amazing.finance env variable .env file. Change this value from amazing.finance to localhost:3000

And then replace code in [...moralis].ts with this code

import { MoralisNextApi } from "@moralisweb3/next";

export default MoralisNextApi({
  apiKey: process.env.MORALIS_API_KEY,
  authentication: {
    domain: process.env.APP_DOMAIN,
    uri: process.env.NEXTAUTH_URL,
    timeout: 120,
  },
});

[4-Art]

Your good. I fixed it. I was wondering if you could spend some more time with me today. If so I need two more buttons to be configured with metamask. Would you please provide me the code to “mint” an NFT from the collection your now using also in the demo haha. (please change this) The second button is a sign in button. The “Ship” button is our authenticator.
Here is a screen shot of what im thinking.

[johnversus]

Hi @4-Art

You can find some tutorials on our youtube for minting NFT. Here is an example tutorial that shows how to mint NFT. You can adapt this code into your project.

We can help if you are stuck somewhere.

Feel free to open a new post for any further errors. I will be closing this since the issue in this post is solved.

[4-Art]

Thanks for the advice. I watched the tutorial. The introduction of the AI component of the build was way to complicated for me to follow although some important tips where taken such as: downloading openzepplin, structure of folders… I am for now going to follow other videos that include a mint button on youtube and see what I find more basic. I understand that Next js uses “react” and the idea of sdk is sinking in also looking into tailwindcss. I will start reviewing this video closer. I watched this earlier and seems clear enough. Here is another youtube link im watching > https://www.youtube.com/watch?v=_siRFuLEgGQ&t=469s

[johnversus]

You can just take a look the code on how the nft image is minted. Ignore the AI part. You can replace the AI image data with any of your image data and then call the mint function for it. The code to mint NFT will remain same.

[4-Art]

Alright that makes sense I will go back to the one you suggested. (https://www.youtube.com/watch?v=6R9OuhVBFYM) and give that a try.

[4-Art]

Any suggestions on how to style the page. I have tried some typescript inputs for example

TITLE

Not sure what kind of styles I am able to use. If you have an example for that also. I can work on that simultaneously.

[4-Art]

Heres a problem. Today I test the repo you made. I made an entirely new file up because it was not working thinking I changed something trying to get the mint button to work. So like I said a refreshed and start from scratch with the link (https://github.com/JohnVersus/demo-apps-nextjs_moralis_auth) the message im getting now shows.

[johnversus]

The error mean that you already attempted to authenticate once. So we have to close the previous metamask popup or complete the request.

[4-Art]

Thank you. That is correct. My extension was not signed in already but there seem to be a memory associated to the account. Back to the mint button

[4-Art]

Hello,

Is it possible to use thirdweb ERC1155 contract and integrate that with a button to mint? Any sources?

[johnversus]

I am not aware of using the thirdweb contracts. As far as my knowledge they have their own frontend sdk for making smart contract requests like minting NFT. You can once checking their docs for more details.

[4-Art]

I will keep trying here. As for now could you suggest how styling is compatible. Can I have some sample code when you get the chance for editing text/backgrounds…

[johnversus]

It complex to share css without knowing how you want it to look like . You can find some example css code in stackoverflow of codepen.
https://codepen.io/search/pens

Or you can ask chatgpt

[4-Art]

Fantastic! That will keep me going for now… To keep you on this file I created another gitHub repo.!
https://github.com/JoshWoodsArchitecture/herbz

Please take a look into why I am getting this error.
To make it clear I am tailoring this method from this link everything in the vid after the 18min mark > https://www.youtube.com/watch?v=NrjCi0EDTyI

I think im close but not sure what viem is. To put this in perspective for you I have also ran in the terminal the following: yarn add wagmi. The code now has errors in the […moralis].ts folder. Not sure the reason why? Here is a sceenshot

[johnversus]

viem is another package like wagmi. You can fix the error by installing viem

run yarn add viem to install.

[4-Art]

I would like to pay for your service johnversus… Please explain how we can collaborate together.

gitHub will have continual updates but I will let you know when I need more help. I have wrapped my mind around code at this point and started to get a handle on how things work. Im still a beginner. Please if you could let me know how we can arrange a completed code for my NFT!

Cheers and thanks again (viem)

[4-Art]

Been reading about how to fix this but I can not on my own. Attached >

Any ideas?

[johnversus]

Hi @4-Art

We can help if you are stuck with some errors, but we cant provide complete code. You will have to try it on your own.

Regarding the error can you share how your _app.jsx looks like now? It could be possible that you did not export any component from _app.jsx or the exported component is not a valid reach component.