[SOLVED] Keep getting Converting circular structure to JSON error

Moralis General
#1

Hello everyone, first of all I have to admit that I have just started with coding and this is my first dAPP, so I am following a Moralis template for a Gated NFT Website.

Everything was going well as I tested the app using localhost, however as soon as I deployed the dAPP on Vercel, the “connect wallet” button stops working properly it just opens metamask to connect, but it doesn’t open the “signature request” window nor does it redirect to the user page.

While checking the logs in Vercel I noticed that the following error appeared:

[POST] /api/auth/request-message
01:53:11:83
RequestId: 89adb38d-5c92-421d-b461-4f789caa7491 Error: Runtime exited with error: exit status 1
Runtime.ExitError
2022-09-22T04:53:12.399Z	deb61516-e3ad-4035-8443-ac4bd05199e8	ERROR	TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'ClientRequest'
    |     property 'socket' -> object with constructor 'TLSSocket'
    --- property '_httpMessage' closes the circle
    at JSON.stringify (<anonymous>)
    at sendJson (/var/task/node_modules/next/dist/server/api-utils/node.js:321:19)
    at ServerResponse.apiRes.json (/var/task/node_modules/next/dist/server/api-utils/node.js:168:31)
    at handler (/var/task/.next/server/pages/api/auth/request-message.js:45:25)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils/node.js:184:9)
    at async NextNodeServer.runApi (/var/task/node_modules/next/dist/server/next-server.js:403:9)
    at async Object.fn (/var/task/node_modules/next/dist/server/base-server.js:493:37)
    at async Router.execute (/var/task/node_modules/next/dist/server/router.js:222:36)
    at async NextNodeServer.run (/var/task/node_modules/next/dist/server/base-server.js:612:29)
2022-09-22T04:53:12.399Z	deb61516-e3ad-4035-8443-ac4bd05199e8	ERROR	TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'ClientRequest'
    |     property 'socket' -> object with constructor 'TLSSocket'
    --- property '_httpMessage' closes the circle
    at JSON.stringify (<anonymous>)
    at sendJson (/var/task/node_modules/next/dist/server/api-utils/node.js:321:19)
    at ServerResponse.apiRes.json (/var/task/node_modules/next/dist/server/api-utils/node.js:168:31)
    at handler (/var/task/.next/server/pages/api/auth/request-message.js:45:25)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils/node.js:184:9)
    at async NextNodeServer.runApi (/var/task/node_modules/next/dist/server/next-server.js:403:9)
    at async Object.fn (/var/task/node_modules/next/dist/server/base-server.js:493:37)
    at async Router.execute (/var/task/node_modules/next/dist/server/router.js:222:36)
    at async NextNodeServer.run (/var/task/node_modules/next/dist/server/base-server.js:612:29)
RequestId: deb61516-e3ad-4035-8443-ac4bd05199e8 Error: Runtime exited with error: exit status 1
Runtime.ExitError

Is there any way to solve this problem or else disable the “signature request” in a way that makes my dAPP work?

Thanks a lot!

#2

I saw this reported before. I don’t know the exact solution. It could be to some parameters for ssl connections.

#3

This is a local route to your server?

#4

Hello Cryptokid, thank you for replying to my post, I apologize because since I am a beginner, I could not understand your question, how can I identify if this is the local route to my server? This is the route to the file who do the request “signature request” to the wallet, if it helps, here is the code from the file:

import Moralis from 'moralis';

const config = {
    domain: process.env.APP_DOMAIN,
    statement: 'Please sign this message to confirm your identity.',
    uri: process.env.NEXTAUTH_URL,
    timeout: 60,
};

export default async function handler(req, res) {
    const { address, chain, network } = req.body;

    await Moralis.start({ apiKey: process.env.MORALIS_API_KEY });

    try {
        const message = await Moralis.Auth.requestMessage({
            address,
            chain,
            network,
            ...config,
        });

        res.status(200).json(message);
    } catch (error) {
        res.status(400).json({ error });
        console.error(error);
    }
}
#5

I don’t know exactly where it is going that request, you could add more logging to se if that handler function is called

#6

Don’t know if this helps with my problem but I tried to see what is happening on the browser console and that’s what shows up for me:

Captura de Tela 2022-09-22 às 14.39.45
Captura de Tela 2022-09-22 às 14.39.45740×267 36.7 KB

#7

from that error it looks like /api/auth/session didn’t return a json file and it returns a html file

#8

Can you make sure your code matches the tutorial repo.

Did you add your environment variables to the Vercel project settings? A clone of the repo, adding the .env variables (generating the NEXTAUTH_SECRET and changing NEXTAUTH_URL to match the Vercel URL e.g. testv200.vercel.app) and deploying it worked on my end.

#9

I can’t get past this same error… using exactly whats in the repo…
anyway to fix?

#10

if this helps

[cause]: [AxiosError: Request failed with status code 400] {
code: ‘ERR_BAD_REQUEST’,
config: {
transitional: [Object],
adapter: [Function: httpAdapter],
transformRequest: [Array],
transformResponse: [Array],
timeout: 10000,
xsrfCookieName: ‘XSRF-TOKEN’,
xsrfHeaderName: ‘X-XSRF-TOKEN’,
maxContentLength: -1,
maxBodyLength: -1,
env: [Object],
validateStatus: [Function: validateStatus],
headers: [Object],
url: ‘https://authapi.moralis.io/challenge/verify/evm’,
params: {},
method: ‘post’,
data: ‘{“message”:“5”,“signature”:“0x87d358048f9a15f8d75814b736cbb1931484e736c…”}’
},

#11

What is your new deployed Vercel link now?

#12
#13

I was referring to the actual deployment link you’re testing with since your issues are when it’s deployed, not in local development.

But in your [...nextauth].js file, you are using return user.json(); whereas the demo is using return user; - can you change that to make sure it matches the tutorial repo code along with all other files.

If I use return user.json(), my previously working deploy breaks with an error of Cannot read properties of null (reading 'auth') when authenticating.

#14

oh, yeah… I’d tried that thinking that was the case… in a comment above, you’d saids it’s returning html… I thought I’d try to have it return json…

the bad response error of coming from moralis

doesn’t work with localhost maybe?

#15

doesn’t work with localhost maybe?

Yes it works fine normally. Didn’t it work with localhost to begin with? Can you get back to that stage where it was only problematic on Vercel? Please make sure you’re using the same code as the repo so that’s not something that has to be taken into account.

#16

got it working… screwed up the .env file… copy paste… moralis key is in there twice
thanks for your fast responses

1 Like
Converting circular structure to JSON
#17

Apologies - I see now I confused you with the OP of this thread where he deployed on Vercel.

#18

Hey Cryptokid and Glad, sending this message to inform you that I have fixed the problem, it was the environment variables that I was misspelling.

Thanks a lot for your help! :grin: :pray:

1 Like
#19

hey all

const message = await Moralis.Auth.requestMessage({
address,
chain,
network,
…config,
});

    res.status(200).json(message);

There’s an error encountered on this line: res.status(200).json(message); . The message object might contain functions as values, which can’t be converted into JSON."