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

Technical Issue Reporting
#21

Hi @4-Art

The invaid key error message is caused due this part of the code. You can remove this code if you are not using wallet connect.

new WalletConnectConnector({
      chains,
      options: {
        projected: "...", // 👈 this has to be replaced with wallet connect project id. 
      },
    }),

Please refer to the wagmi docs more details on how to use different connectors.

#22

Thank you once again.
I input the project id and tried localhost:3000/sign in once again. There is no change to the message I am seeing(404). I have also watched the youtube video tutorial (https://www.youtube.com/watch?v=hhkWQPorBKQ&list=PL3f4bfsSMspp1hnY6A8IbNbJXl0UC00N3). I noticed that the code used in the video including the structure specifically the folder api/auth has been developed differently. Currently my code is compliant with the instructions @ https://docs.moralis.io/authentication-api/evm/how-to-sign-in-with-metamask#introduction . The changes you have suggested are the only differences in the code which include changing to createconfig on the _app.jsx and inserting the project id to the same page (projectId: “19801612-b219-452a-b56e-0331c57c5b1f”.) Now referring to the youtube video why do we not see the […moralis].ts folder included on that tutorial. The instructor instead uses a folder entitled request-message.js which I do not have currently.

#23

To put things in perspective I am tryin to create a NFT token gated website. I need this to sell a physical version of the NFT I have created. The intention would be after purchase of the NFT a buyer is authenticated and redirected to a shipping page which would be a space only for holders of the NFT to input contact information in order to receive a package in the mail. Should I start over and use this repository I have come across. https://github.com/MoralisWeb3/demo-apps/tree/main/nextjs_moralis_nft_gating Please let me know if you suggest to just try this route instead.

#24

Hi @4-Art

The youtube tutorial was released long back so the code in youtube video might not match with the docs.
Is it possible to share your code through the Github repo? so I can take a closer look at what is causing the error.

#25

And btw the project Id here seems incorrect as it should not have any hypen -.
Make sure you are getting the correct wallet connect project Id from here.

#26

I feel it is easier without trying to figure out how to upload to gitHub currently. Instead what I am doing is using this repository now! :grinning: https://github.com/MoralisWeb3/demo-apps/blob/main/nextjs_moralis_nft_gating/pages/api/moralis/[...moralis].ts I have finished copying the files into a new visual studio code editor. Update the .env.local folder and corrected the domain plus added my nft contract address. Now the only issue present lies within the api folder. It seem that the typescript is conflicting with @moralisweb3/next’. Here is another screenshot. Please use the repository above as example.

error9
error91140×358 49.5 KB

#27

The import error could be due to missing package. Did you install @moralisweb3/next package?

#28

I did not… Thank you so much. Added now. That did clear the issue underlined. Now I am going to add my repository to gitHub. I will let you know when it has been uploaded. I am getting a 404 still.

1 Like
#29

I am having a difficult time installing git.

After downloading I tried “git --version” in my terminal and my computer does not recognize the download. I am have this problem now >

error10
error101191×273 43.2 KB
So in the mean time i will copy each file to a word doc by copy and paste. This way you can see it all / copy into your own for analysis.

#31

Thanks for the details

Please update your _app.jsx with this code and verify if you still throws any error.

import { configureChains, WagmiConfig, createConfig } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { SessionProvider } from "next-auth/react";
import { mainnet } from "wagmi/chains";
import { InjectedConnector } from "wagmi/connectors/injected";

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()]
);

const config = createConfig({
  connectors: [new InjectedConnector({ chains })],
  publicClient,
  webSocketPublicClient,
});

function MyApp({ Component, pageProps }) {
  return (
    <WagmiConfig config={config}>
      <SessionProvider session={pageProps.session} refetchInterval={0}>
        <Component {...pageProps} />
      </SessionProvider>
    </WagmiConfig>
  );
}

export default MyApp;
#32

That didn’t do the trick yet. I have two moralis api key on my profile… I tried running each one just in case. One is set to active on my profile which is what is shown in message 30 the other is set to legacy and that one didn’t work either.

#33

Hello once again I created the gitHub repository. Its set to private, now how can I add you as a collaborator. What is your account name to add.?

#34

Hi, we pushed some updates to the docs. If you want to use wallet connect, please follow the metamask tutorial first

https://docs.moralis.io/authentication-api/evm/how-to-sign-in-with-metamask

Then you can follow the wallet connect tutorial

https://docs.moralis.io/authentication-api/evm/how-to-sign-in-with-walletconnect

#35

Perfect will do a good review of both. Now can you please address this topic. I need a NFT token gated webpage. Are the docs provide under this link updated as well because I need this template version in brackets (https://docs.moralis.io/guides/token-gating-website-nextjs#nft-gated-page-with-getserversideprops) to get going. Which is more than just authenticating metamask. If you could continue to help. Its much appreciated.

#36

Hi, the code on that page will work

#37

I would like to share a gitHub repository with you. I tried the NFT token gated tutorial the one I need and my final result is the same as the authentication page. What is your gitHub name so I could add you?

#38

Can you share the snapshot of the error? Are you sure that you have added the correct project Id of wallet connect?

My github id is JohnVersus.

#39

Cheers. I have just added you to the gitHub repository. Thank you for continuing support. If everything pans out then I am sure I owe you ! Here is the error screen shot

error11
error111920×1017 51 KB

#40

This seems just like a next js error. Make sure the url path name is matching with the file name or else it shows this 404 error.

btw i don’t see any files on your github repo😅

#41

Yes clearly i’m a beginner :sweat_smile: