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

Technical Issue Reporting
#42

https://github.com/JoshWoodsArchitecture/herbgrinder that is the URL to gitHub for me

#43

https://github.com/JoshWoodsArchitecture/herbgrinder/invitations this is the invite to the private repository

1 Like
#44

I see that you are trying this in the new next js 13 framework, but the files are not in the correct folder, hence the error 404. Will share the updated file structure and code in some time.

image
image510×1028 47.3 KB

#45

No problem take your time. I really am happy with the service from MORALIS!

#46

Hey @4-Art

There are some complexities in using next-auth in next js 13 version. So I used the compatible next js version.

Please check the below repo for the updated code.

You need to do the following steps:

  1. rename .env.local.example file to .env.local and update the required env variables
  2. run npm install
  3. run npm run dev

It should run without any error. I also added your code from protected.jsx here, so when you sign in from signin page it will redirect to protected page.

#47

I am going to try shortly just a little busy at the moment. I will send another message once I am completed. Keeping my fingers crossed. Thanks.

#48

Well unfortunately I have no difference on my end. I’m still seeing the same thing (404). I updated the .env.local all other files have been directly copied and update the security with the generator then saving the new key on my moralis profile. No luck the repo is updated if you could check please.

#49

Ignore your old project files. It will not work.
Clone the repo that I shared and use it.

#50

error12
error12397×506 24.7 KB
error13 Thats the good news and the bad news! I have successfully cloned the repo in vsc. Ran dev and seen the button! Now upon authentication in Metamask I am displayed an odd message…(attached image). I am hoping to have this be safe! Not sure why meta has a warning like this. Could this be cleared. Either way for the time being I will spend time styling the webpage to my product. Unitl we chat next, thank you so much for creating the framework. I will continue to test the NFT side of the project and will keep in touch through this forum. My upmost pleasure to work with you. Please stay tapped in with me.
P.S. below is a comment you could use if need be for any promos.

Kindly - Josh aka 4-Art.

4-Art - “The Moralis team (specifically johnversus) is both professional, and efficient. This entire company has brought positivity to web3 with their help towards me. My trust in this system is gained due to the excellent communication from everyone. Appreciate the work!”

1 Like
#51

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,
  },
});
#52

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.

error14
error141462×867 35.5 KB

#53

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. :smiley:

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

#54

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

#55

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.

#56

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.

#57

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.
#58

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.

error15
error151667×613 70.4 KB

#59

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

#60

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 :sweat_smile:

1 Like
#61

Hello,

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