GetStaticpaths and getStaticprops not working with moralis

#1

i was wondering if i was doing anything wrong here is my code

    const { data } = useMoralisCloudFunction("getAllUser");


    // Generate dynamic paths for available users
    const paths = data.map((user) => ({
        params: { userId: user.get("ethAddress") },
    }));

    // Return paths
    return {
        paths,
        fallback: false,
    };
}

export async function getStaticProps({ params }) {
    const { data } = useMoralisCloudFunction("getOwnerInfo", params);
    const user = data;

    // Generate metadata
    const title = `${user.get("username") | OneFire}`;
    const description = user.get("description");
    const profilePic = user.get("ProfilePic");
    const image = !profilePic && 'https://avatars.dicebear.com/api/avataaars/${user.get("username")}.svg || profilePic';

    // Return props
    return {
        props: {
            title,
            description,
            image,
            params,
        },
    };
}``` im getting this error

TypeError: Cannot read properties of null (reading ‘useContext’)

#2

This is not a moralis issue,
both getStaticProps and getServerSideProps will run on the server, You cannot use react hooks on the server.
You should be able to use vanilla syntax on the server

import Moralis from 'moralis-v1'
const result = await Moralis.Cloud.run("functionName", params);
#3

when i use that it say local host is not defined

export async function getStaticPaths() {
  // Initialize Moralis
  Moralis.initialize("YOUR_APP_ID");
  Moralis.serverURL = "https://YOUR_SERVER_URL.moralis.io";

  // Query for available users
  const query = new Moralis.Query("User");
  const users = await query.find();

  // Generate dynamic paths for available users
  const paths = users.map((user) => ({
    params: { userId: user.get("ethAddress") },
}));

// Return paths
return {
paths,
fallback: false,
};
}
#4
#5
#6

Hey @onefireteam

You mean localhost for the server url?

#7

No my server is already hosted live I’m just trying to staticly generate each page for each users

#8

You can try such instead as Moralis.initialize is deprecated

await Moralis.start({ serverUrl, appId, masterKey });
#9

Okay let me try :raised_hands: it thanks

#10

here bro i did that here is mt code

import { useMoralisCloudFunction } from "react-moralis";
import Banner from "../../components/authorPage/Banner/Banner";
import AuthorProfile2 from "../../components/authorPage/AuthorProfile2/AuthorProfileCard";
import dynamic from "next/dynamic";
import Head from "next/head";
import { Moralis } from "moralis-v1";

function Socials({ userData }) {
    const AuthorTaps = dynamic(
        () => import("../../components/authorPage/AuthorTaps2/AuthorTaps"),
        { ssr: true }
    );

    return (
        <div>
            <Head>
                <title>{userData?.get("username")} | OneFire</title>
                <meta
                    property="og:title"
                    content="OneFire | art is the voice of artist"
                />
                <meta
                    name="twitter:title"
                    content="OneFire | art is the voice of artist"
                />
                <meta name="description" content={userData?.get("description")} />
                <meta
                    property="og:description"
                    content={userData?.get("description")}
                />
                <meta
                    name="twitter:description"
                    content={userData?.get("description")}
                />
                <meta
                    property="og:image"
                    content={
                        !userData.get("ProfilePic") &&
                        `https://avatars.dicebear.com/api/avataaars/${userData?.get(
                            "username"
                        )}.svg` ||
                        userData.get("ProfilePic")
                    }
                />
                <meta
                    name="twitter:image"
                    content={
                        !userData.get("ProfilePic") &&
                        `https://avatars.dicebear.com/api/avataaars/${userData?.get(
                            "username"
                        )}.svg` ||
                        userData.get("ProfilePic")
                    }
                />
                <meta
                    name="keywords"
                    content="onefire, nft marketplace, collectibles, fine art, profile"
                />
                <meta name="viewport" content="initial-scale=1.0, width=device-width" />
                <meta name="twitter:card" content="summary_large_image" />
                <meta name="twitter:site" content="@onefiree" />
                <meta name="twitter:creator" content="@onefiree" />
            </Head>
            <Banner
                bannerImage={
                    "https://ipfs.io/ipfs/QmReUKPY8okoTNM6ky9iyATgAqQ1kF2pVQN8vipNDybooJ"
                }
            />
            <AuthorProfile2 />
            <AuthorTaps params={{ ethAddress: userData.get("ethAddress") }} />
        </div>
    );
}

export async function getStaticPaths() {
    await Moralis.start({
        serverUrl: process.env.NEXT_PUBLIC_SEVER_URL,
        appId: process.env.NEXT_PUBLIC_APP_ID,
        masterKey: process.env.NEXT_PUBLIC_MORALIS_MASTER_KEY,
    });

    const { data } = await Moralis.Cloud.run("getAllUsers");

    const paths = data.map((user) => ({
        params: { userId: user.get("ethAddress") },
    }));

    return {
        paths,
        fallback: true,
    };
}

export async function getStaticProps({ params }) {
    await Moralis.start({
        serverUrl: process.env.NEXT_PUBLIC_SEVER_URL,
        appId: process.env.NEXT_PUBLIC_APP_ID,
        masterKey: process.env.NEXT_PUBLIC_MORALIS_MASTER_KEY,
    });

    const user = await new Moralis.Query("User")
        .equalTo("ethAddress", params.userId)
        .first();

    return {
        props: { user: user.toJSON() },
        revalidate: 1,
    };
}

now im getting this error

ReferenceError: localStorage is not defined

im using next js

#11

what line generates that error?

you would get the same error even if you don’t use Moralis SDK?

#12

how do i check the line i dont see anything here its just a bunch of errors on my console

#13

you can try to remove some parts of the code or add some console.logs from place to place, I’m not familiar with debugging next apps either

#14

okay let me do some debugging if it doesnt work i will host an api calling mongodb directly

1 Like
#15

For those who were wondering I had to build a custom node Js api that makes request directly to my database then I can that api using fetch or axios

#16

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