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

Technical Issue Reporting
#15

what do you see in your console?

#16

This is displaying in the console.

error6
error6658×777 175 KB

#17

Your terminal i mean, after you run npm dev, what do you see there when you access /signin?

#18

Here sorry this is what you mean.

error7
error7987×652 85.7 KB

#19

Hi @4-Art the last screenshot you posted does not show a critical issue, the warning is because some code is not compatible with nextjs and it does a full reload instead of fast refresh in those cases, see more at https://stackoverflow.com/a/74640821/5500559

Then, the 404 when you go to localhost:3000/signin does this happen when you click authenticate? please check your code is exactly as described here: https://docs.moralis.io/authentication-api/evm/how-to-sign-in-with-metamask#secure-authentication-after-signing-and-verifying-the-signed-message

Also please try testing on a browser where you have metamask extension installed, configured and select to read data **on all sites** and let us know if this works. This can be configured right clicking the metamask extension and following:image

#20

Hi Moralis team,

Here was a message from johnversus from your team earlier today:

"Hi @4-Art

As per the latest wagmi sdk version createClient has been replace with createConfig.
Here is an example code on how to update wagmi code as per the latest wagmi version. Please try similar to this." and here is the link ErrorOn - How to Authenticate User with Metamask

I copy and pasted the code from johnversus into my _app.js (attached image) and deleted the import @/styles/global.css line. I thought this was the fix. Instead should I replace the _app.js file to its original stat from the tutorial “how to authenticate with metamask” and use number 4.

Also my setting for my metamask is already set to on all sites

Please provide further instruction.

error8
error81147×757 103 KB

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