Uncaught (in promise) RangeError: Maximum call stack size exceeded

pd28 · March 3, 2022, 3:00pm

This is the complete error:

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at Function.[Symbol.hasInstance] (<anonymous>)
    at traverse (unsavedChildren.js:92:1)
    at traverse (unsavedChildren.js:139:1)
    at traverse (unsavedChildren.js:139:1)
    at traverse (unsavedChildren.js:139:1)
    at traverse (unsavedChildren.js:139:1)
    at traverse (unsavedChildren.js:139:1)
    at traverse (unsavedChildren.js:139:1)
    at traverse (unsavedChildren.js:139:1)
    at traverse (unsavedChildren.js:139:1)
traverse @ unsavedChildren.js:92
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
traverse @ unsavedChildren.js:139
await in traverse (async)
handleOk @ Modal.js:63
handleClick @ button.js:211
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
Show 169 more frames

This is the code:

import React, { useEffect, useState } from 'react'
import { Button, Select, Modal, Input } from 'antd'
import { ShoppingCartOutlined } from '@ant-design/icons'
import { useMoralis } from 'react-moralis'
import axios from 'axios'

const { Option } = Select

function Purchase({ product }) {
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [delivery, setDelivery] = useState('')
  const { Moralis, account, chainId } = useMoralis()
  const [priceEth, setPriceEth] = useState()

  useEffect(() => {
    axios
      .get('https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=USD')
      .then(({ data }) => {
        setPriceEth(product.price / data.USD)
      })
  }, [])

  const handleOk = async () => {

    const options = {
      type: 'native',
      amount: Moralis.Units.ETH(priceEth),
      receiver: '0x09EA01592ACDA28657e51097eBC10ec836Ee3D25',
    }

    await Moralis.enableWeb3()
    let result = await Moralis.transfer(options)
    const Transaction = Moralis.Object.extend('Transaction')
    const transaction = new Transaction()

    transaction.set('Customer', account)
    transaction.set('Delivery', delivery)
    transaction.set('Product', product.title)

    transaction.save()
    setIsModalVisible(false)
  }

  return (
    <>
      <span className='price'>${product.price}</span>
      <p> No Import fees & Free shipping included</p>
      <h1 style={{ color: 'green' }}> In Stock</h1>
      <h3>Quantity</h3>
      <Select defaultValue={1} style={{ width: '100%' }}>
        <Option value={1}>1</Option>
        <Option value={2}>2</Option>
        <Option value={3}>3</Option>
        <Option value={4}>4</Option>
        <Option value={5}>5</Option>
      </Select>
      <Button
        className='login'
        style={{ width: '100%', marginTop: '50px' }}
        onClick={() => setIsModalVisible(true)}
      >
        <ShoppingCartOutlined /> Buy now
      </Button>
      <Modal
        title='Purchase Product'
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={() => setIsModalVisible(false)}
      >
        <div style={{ display: 'flex' }}>
          <img
            src={product.image}
            alt='product'
            style={{ width: '200px', padding: '22px' }}
          />
          <div>
            <h3>{product.title}</h3>
            <h2>
              Price: <span style={{ color: 'darkred' }}>${product.price}</span>
            </h2>
            <h4>Delivery Address:</h4>
            <Input
              onChange={(value) => {
                setDelivery(value)
              }}
            ></Input>
          </div>
        </div>
      </Modal>
    </>
  )
}

export default Purchase

I’m unable to figure out and have seen other posts on the same error but haven’t found a solution.

cryptokid · March 3, 2022, 1:58pm

usually you get that error when you use a variable instead of a value for a function parameter, you’ll have to add logging to see where from that error comes

pd28 · March 3, 2022, 2:32pm

If this helps, this is the code from the latest amazon clone using moralis video:

import {Select, Button, Modal, Input} from 'antd'
import {ShoppingCartOutlined} from "@ant-design/icons";
import { useState } from 'react';
import { useMoralis } from 'react-moralis';

const {Option} = Select;
function Purchase({book}) {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [delivery, setDelivery] = useState("");
    const {Moralis, account, chainId} = useMoralis();

  const handleOk = async () => {

    // Get The Price of MATIC

    const options = {
      address: "0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0",
      chain: "eth"
    };
    const price = await Moralis.Web3API.token.getTokenPrice(options);
    const priceMatic = book.price / price.usdPrice;
    
    // Send Matic to book store owenr address

    const options1 = {
      type: "native", 
      amount: Moralis.Units.ETH(priceMatic), 
      receiver: "xxxxx"
    }
    let result = await Moralis.transfer(options1)


    //Save Transaction Details to DB
    const Transaction = Moralis.Object.extend("Transaction");
    const transaction = new Transaction();

    transaction.set("Customer", account);
    transaction.set("Delivery", delivery);
    transaction.set("Product", book.name);

    transaction.save()
    setIsModalVisible(false);
  }

  return (
    <>
      <span className="price"> ${book.price}</span>
      <p>No Import Fees & Free Shipping Included</p>
      <h1 style={{ color: "green" }}> In Stock </h1>
      <h3>Quantity</h3>
      <Select defaultValue={1} style={{ width: "100%" }}>
        <Option value={1}>1</Option>
        <Option value={2}>2</Option>
        <Option value={3}>3</Option>
        <Option value={4}>4</Option>
        <Option value={5}>5</Option>
      </Select>
      {chainId === "0x13881" &&
      <Button
      className="login"
      style={{ width: "100%", marginTop: "50px" }}
      onClick={()=>setIsModalVisible(true)}
    >
      <ShoppingCartOutlined /> Buy Now
    </Button>
      }
      
      <Modal
        title="Purchase Product"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={()=>setIsModalVisible(false)}
      >
        <div style={{ display: "flex" }}>
          <img src={book.image} alt="product" style={{ width: "200px" }}></img>
          <div>
            <h3>{book.name}</h3>
            <h2>${book.price}</h2>
            <h4>Delivery Address</h4>
            <Input onChange={(value) => setDelivery(value.target.value)}></Input>
          </div>
        </div>
      </Modal>
    </>
  )
}

export default Purchase

and this is my code:

import React, { useEffect, useState } from 'react'
import { Button, Select, Modal, Input } from 'antd'
import { ShoppingCartOutlined } from '@ant-design/icons'
import { useMoralis } from 'react-moralis'
import axios from 'axios'

const { Option } = Select

function Purchase({ product }) {
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [delivery, setDelivery] = useState('')
  const { Moralis, account, chainId } = useMoralis()
  const [priceEth, setPriceEth] = useState()

  useEffect(() => {
    axios
      .get('https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=USD')
      .then(({ data }) => {
        setPriceEth(product.price / data.USD)
      })
  }, [])

  const handleOk = async () => {
    const options = {
      type: 'native',
      amount: Moralis.Units.ETH(priceEth),
      receiver: '0x09EA01592ACDA28657e51097eBC10ec836Ee3D25',
    }

    await Moralis.enableWeb3()
    let result = await Moralis.transfer(options)
    const Transaction = Moralis.Object.extend('Transaction')
    const transaction = new Transaction()

    transaction.set('Customer', account)
    transaction.set('Delivery', delivery)
    transaction.set('Product', product.title)

    transaction.save()
    setIsModalVisible(false)
  }

  return (
    <>
      <span className='price'>${product.price}</span>
      <p> No Import fees & Free shipping included</p>
      <h1 style={{ color: 'green' }}> In Stock</h1>
      <h3>Quantity</h3>
      <Select defaultValue={1} style={{ width: '100%' }}>
        <Option value={1}>1</Option>
        <Option value={2}>2</Option>
        <Option value={3}>3</Option>
        <Option value={4}>4</Option>
        <Option value={5}>5</Option>
      </Select>
      <Button
        className='login'
        style={{ width: '100%', marginTop: '50px' }}
        onClick={() => setIsModalVisible(true)}
      >
        <ShoppingCartOutlined /> Buy now
      </Button>
      <Modal
        title='Purchase Product'
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={() => setIsModalVisible(false)}
      >
        <div style={{ display: 'flex' }}>
          <img
            src={product.image}
            alt='product'
            style={{ width: '200px', padding: '22px' }}
          />
          <div>
            <h3>{product.title}</h3>
            <h2>
              Price: <span style={{ color: 'darkred' }}>${product.price}</span>
            </h2>
            <h4>Delivery Address:</h4>
            <Input
              onChange={(value) => {
                setDelivery(value)
              }}
            ></Input>
          </div>
        </div>
      </Modal>
    </>
  )
}

export default Purchase

I’ve tried debugging and logging too. But, one of out 100 times, this error doesn’t pop up and everything works fine. I don’t know why this is occuring.

pd28 · March 3, 2022, 2:51pm

Got the problem. I was passing an object as the variable instead of a string. Thanks for your help.