[SOLVED] Moralis.File error

Greetings Everyone!

I made an NFT minter using Moralis but when I click the mint button I get an error: TypeError: Cannot read properties of undefined (reading ‘File’). This is happening on this specific line in my code: const file1 = new Moralis.File(file.name, file);

The entire file is as follows:

import { useMoralis, useWeb3Contract } from “react-moralis”

import { useRouter } from “next/router”

import { useState, useEffect } from “react”;

import { abi, contractAddress, ContractAddress } from ‘…/constants/index’;

import { Moralis } from “moralis”;

import Web3 from ‘web3’;

const web3 = new Web3(Web3.givenProvider);

export default function Dashboard() {

const { isWeb3Enabled, deactivateWeb3, user } = useMoralis();

const router = useRouter();

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

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

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

useEffect(() => {

    if(!isWeb3Enabled) {

        router.push('/')

    }

}, [isWeb3Enabled]);

const onSubmit = async (e) => {

    e.preventDefault();

    try {

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

        await file1.saveIPFS();

        const file1url = file1.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();

       /* useWeb3Contract({

            abi: abi,

            contractAddress: contractAddress,

            functionName: 'mint',

            params: {

                _uri: metadataurl,

            },

        }) */

        const contract = new web3.eth.Contract(abi, ContractAddress);

        const response = await contract.methods

            .mint(metadataurl)

            .send({ from: user.get('ethAddress') });

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

        alert(`NFT Minted Successfully.  Contract Address - ${contractAddress} with a token ID of: ${tokenId}`)

    } catch (error) {

        console.error(error);

        alert('Something went wrong');

    }

};

return (

    <div className="flex w-screen h-screen items-center justify-center">

        <form onSubmit={onSubmit}>

            <div className="w-[100px] h-[50px]">

                <input

                    type="text"

                    className=" border-[1px] p-2 border-black text-lg w-[300px]"

                    placeholder="Document Name"

                    value={name}

                    onChange={e => setName(e.target.value)}></input>

            </div>

            <div className="w-[100px] h-[50px] mt-3">

                <input

                    type="text"

                    className=" border-[1px] p-2 border-black text-lg w-[300px]"

                    placeholder="Description"

                    value={description}

                    onChange={e => setDescription(e.target.value)}></input>

            </div>

            <div className="w-[100px] h-[50px] mt-3">

                <input

                    type="file"

                    className="border-[1px] p-2 border-black text-lg w-[300px]"

                    onChange={(e) => setFile(e.target.files[0])}></input>



            </div>

            <button type="submit" className="mt-5 w-full bg-green-700 text-white text-xl rounded-xl animate-bounce">Mint!</button>

            <button onClick={deactivateWeb3} className="mt-5 w-full bg-red-700 text-white text-xl rounded-xl">LOGOUT</button>

        </form>

    </div>

)

}

Any ideas or direction would be super helpful, thank you in advance!

Which version of moralis / react-moralis are you using? You can also try using moralis from the useMoralis hook (and then comment out the top Moralis import).

I’m using the most up to date versions. I didn’t know I could import Moralis through the useMoralis hook! I’m going to try that now, I’ll report my progress asap, thank you!

I ask because if you’re using moralis in a React project, it should be version 1.11.0 or older, not 2.x.

These are the latest stable versions you can use - [email protected] and [email protected].

1 Like

Your suggestion fixed it, and I’m still using 2.2.0 but with Next, it’s working but is that safe? And the admins can mark this SOLVED, thank you again Glad!

1 Like

No Moralis 2.x is a different SDK which is backend focused (you set up your own backend and database). It can be used with Next.js, but it doesn’t involve use of Moralis servers.

If you want to keep using Moralis servers and code like Moralis.File, you need to keep using v1 (right now, in React projects, the latest stable version is 1.11.0), docs are still here.