Error trying to mint a NFT with Next.js app

Moralis General
#1

Hellow everyone. Im trying to make NFT minter with Next.js but IĀ“m getting this errors:

Error: Received an error with invalid JSON from Parse:

<!DOCTYPE html><html><head><style data-next-hide-fouc="true">body{display:none}</style><noscript data-next-hide-fouc="true"><style>body{display:block}</style></noscript><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>404: This page could not be found</title><meta name="next-head-count" content="3"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1674228669515"></script><script src="/_next/static/chunks/webpack.js?ts=1674228669515" defer=""></script><script src="/_next/static/chunks/main.js?ts=1674228669515" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1674228669515" defer=""></script><script src="/_next/static/chunks/pages/_error.js?ts=1674228669515" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1674228669515" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1674228669515" defer=""></script><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><div id="__next"><div style="font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>
                body { margin: 0; color: #000; background: #fff; }
                .next-error-h1 {
                  border-right: 1px solid rgba(0, 0, 0, .3);
                }

                @media (prefers-color-scheme: dark) {
                  body { color: #fff; background: #000; }
                  .next-error-h1 {
                    border-right: 1px solid rgba(255, 255, 255, .3);
                  }
                }</style><h1 class="next-error-h1" style="display:inline-block;margin:0;margin-right:20px;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:49px;margin:0;padding:0">This page could not be found<!-- -->.</h2></div></div></div></div><script src="/_next/static/chunks/react-refresh.js?ts=1674228669515"></script><script id="__NEXT_DATA__" type="application/json">

{ā€œpropsā€:{ā€œpagePropsā€:{ā€œstatusCodeā€:404}},ā€œpageā€:"/_error",ā€œqueryā€:{},ā€œbuildIdā€:ā€œdevelopmentā€,ā€œisFallbackā€:false,ā€œgipā€:true,ā€œscriptLoaderā€:[]}
at handleError

I can authenticate via metamask and go to dashboard.js but when i press Mint button I get this errors.

Dashboard.js

import React from "react";

import styles from '../styles/Home.module.css';

import { useAccount, useDisconnect, useConnect } from "wagmi";

import Moralis from 'moralis'

import Web3 from 'web3';

import { useRouter } from 'next/router';

import { useEffect } from 'react';

import { useState } from "react";

Moralis.initialize("YOUR_API_KEY");

Moralis.serverURL = "http://localhost:3000";

const web3 = new Web3(Web3.givenProvider);

export default function Dashboard(){

    const { isConnected } = useAccount();

    const router = useRouter();

    const { disconnectAsync } = useDisconnect();

    const { account } = useConnect();

    const [name, setName] = useState('');

    const [description, setDescription] = useState('');

    const [file, setFile] = useState(null);

    useEffect(() => {

        if(!isConnected) router.push('/')

    }, [isConnected]);

    const onSubmit = async (e) =>  {

        e.preventDefault();

        try {

            //save image to IPFS

            const file1 = new Moralis.File(file.name, file);

            await file1.saveIPFS();

            const file1url = file1.ipfs;

            //generate metadata and save to ipfs

            const metadata = {

                name, description, image: file1url

            }

            const file2 = new Moralis.File(`${name}metadata.json`, {

                base64: Buffer.from(JSON.stringify(metadata)).toString('base64')

            });

            await file2.saveIPFS();

            const metadataurl = file2.ipfs();

            //interact with smart contracts

            const contract = new web3.eth.Contract(contractABI, contractAddress);

            const response = await contract.methods.mint(metadataurl).send({ from: account.get('ethAddress')});

            //const tokenId = response.events.Transfer.returnValues.tokenId;

            alert(

                'NFT successfully minted. Contract address - ${contractAddress} and Token Id - ${tokenId}'

            );

        } catch(err) {

           console.error(err);

           alert('Something went wrong');

        }

    }

    return <div className={styles.main}>

        <form onSubmit={onSubmit}>

            <div>

                <input type="text" className={styles.form} placeholder="Name" value={name} onChange={e => setName(e.target.value)}/>

            </div>

            <div>

                <input type="text" className={styles.form} placeholder="Description" value={description} onChange={e => setDescription(e.target.value)}/>

            </div>

            <div>

                <input type="file" className={styles.form} placeholder="File" onChange={e => setFile(e.target.files[0])}/>

            </div>

            <button type="submit" className="styles.login">Mint now</button>

            <button onClick={disconnectAsync} className={styles.login}>Log out</button>

        </form>

    </div>

}
#2

hello, you can see here how to post code on forum

maybe you get a 404 error because that route doesnā€™t exist?

#3

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.