Error: Received an error with invalid JSON from Parse:

Moralis General
#1

Hello everyone I and building a Next.js app and react Moralis.

Unhandled Runtime Error
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 name="viewport" content="width=device-width"/><meta charSet="utf-8"/><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=1639042281058"></script><script src="/_next/static/chunks/webpack.js?ts=1639042281058" defer=""></script><script src="/_next/static/chunks/main.js?ts=1639042281058" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1639042281058" defer=""></script><script src="/_next/static/chunks/pages/_error.js?ts=1639042281058" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1639042281058" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1639042281058" defer=""></script><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><div id="__next"><div style="color:#000;background:#fff;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 }</style><h1 style="display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top">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:inherit;margin:0;padding:0">This page could not be found<!-- -->.</h2></div></div></div></div><script src="/_next/static/chunks/react-refresh.js?ts=1639042281058"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"development","isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>

Source
.next\static\chunks\pages\_app.js (453:0) @ handleError

  451 |   } catch (e) {
  452 |     // If we fail to parse the error text, that's okay.
> 453 |     error = new _ParseError.default(_ParseError.default.INVALID_JSON, "Received an error with invalid JSON from Parse: ".concat(response.responseText));
  454 |   }
  455 | } else {
  456 |   var message = response.message ? response.message : response;

Got this error.

import 'tailwindcss/tailwind.css'

import { MoralisProvider } from "react-moralis";

const serverUrl = "process.env.NEXT_PUBLIC_MORALIS_SERVER_ID"

const appId = "process.env.NEXT_PUBLIC_MORALIS_APP_ID"

function MyApp({ Component, pageProps }) {

  return (

    <MoralisProvider

      serverUrl={serverUrl}

      appId={appId}

    >

      <Component {...pageProps} />

    </MoralisProvider>

  )

}

export default MyApp

_app.js

component/navbar.js

import { useMoralis } from "react-moralis";

const Navbar = () => {
    const { authenticate } = useMoralis();
    return (
        <>
............some code
<div className="flex-none">
                <button className="btn btn-square btn-ghost"
                    onClick={() => {
                        authenticate({ provider: "metamask" });
                    }}
                  >
                    <MetamaskSvg/> //just for placeholder.
                </button>
            </div>
.............some code
        </>
    );
};

export default Navbar;
#2

you got that error from the line with authenticate({ provider: "metamask" }) ?

anything else works fine, for example using a web3api call?

did that happens every time, or it happened once?

I didn’t see this error before

#3

ever time but only on reload

#4

maybe you could check if Moralis SDK was initialized:

const { Moralis, isInitialized, ...rest } = useMoralis();
#5

complete source file