NextJS Web3Api not initialized

Moralis General
#1

I am getting the following error when trying to query the list of NFTS from the collection:

Error: Web3Api not initialized, run Moralis.start() first

I am using NestJS.

My NFT Collection component


import Head from "next/head";
import { NFTGrid } from "../components";
import { Moralis } from "moralis";
import {
  useMoralis,
  useMoralisWeb3Api,
  useMoralisWeb3ApiCall,
} from "react-moralis";
function collection() {
  const contractAddress = "0xba5608385cd6b76eb5c4d8a88d6f427df919e834";

  const { Moralis, isInitialized } = useMoralis();
  const Web3Api = useMoralisWeb3Api();

  const options = {
    address: contractAddress,
    chain: "rinkeby",
  };
  const { fetch, data, error, isLoading } = useMoralisWeb3ApiCall(
    Web3Api.token.getAllTokenIds(options)
  );
  console.log(data);

  return (
    <>
      <Head>
      </Head>
      <main>
            <button onClick={() => fetch()}>Refetch</button>
            <pre>{JSON.stringify(data, null, 2)}</pre>
            {/* <NFTGrid nfts={nfts} /> */}
      </main>
    </>
  );
}

export default collection;

My _app.js

import { useEffect } from "react";
import { Layout } from "../components";
import AOS from "aos";
import "aos/dist/aos.css";
import { useRouter } from "next/router";
import * as ga from "../lib/ga";
import { MoralisProvider } from "react-moralis";
import { SSRProvider } from "@react-aria/ssr";
function MyApp({ Component, pageProps }) {
  const router = useRouter();
  useEffect(() => {
    const handleRouteChange = (url) => {
      ga.pageview(url);
    };
    //When the component is mounted, subscribe to router changes
    //and log those page views
    router.events.on("routeChangeComplete", handleRouteChange);

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);

  useEffect(() => {
    // here you can add your aos options
    AOS.init({
      offset: 100,
      once: true,
    });
  }, []);
  return (
    <>
      <SSRProvider>
        {typeof window !== "undefined" && (
          <MoralisProvider
            appId={process.env.NEXT_PUBLIC_MORALIS_APP_ID}
            serverUrl={process.env.NEXT_PUBLIC_MORALIS_SERVER_URL}
          >
            <Layout>
              <Component {...pageProps} />
            </Layout>
          </MoralisProvider>
        )}
      </SSRProvider>
    </>
  );
}

export default MyApp;
#2

You could also try to add Moralis.start in the file where you imported Moralis like this: