TypeError: Cannot read properties of undefined (reading 'toString') shows in console

This error shows in the console and I can not find the solution to solve it. I have not even used "toString" in the app. I think there is problem in the Row section. Because every time I delete the the Row and the elements in it, the error disappear.

    import React from 'react';
    import millify from 'millify';
    import { Typography, Row, Col, Statistic } from 'antd';
    import { Link } from 'react-router-dom';

    import { useGetCryptosQuery } from '../services/cryptoApi';
    import Cryptocurrencies from './Cryptocurrencies';
    import News from './News';
    import Loader from './Loader';

    const { Title } = Typography;  

    const Homepage = () => {
    const { data, isFetching } = useGetCryptosQuery(10);
    const globalStats = data?.data?.stats;

    if (isFetching) return <Loader />;


    return (
    <>
      <Title level={2} className="heading">Global Crypto Stats</Title>
      <Row>
        <Col span={12}>
          <Statistic title='Total Cryptocurrencies' value={globalStats?.total} />
        </Col>
        <Col span={12}>
          <Statistic title='Total Exchanges' value={millify(globalStats?.totalExchanges)} />
        </Col>
        <Col span={12}>
          <Statistic title='Total Market Cap' value={millify(globalStats?.totalMarketCap)} />
        </Col>
        <Col span={12}>
          <Statistic title='Total 24h Volume' value={millify(globalStats?.total24hVolume)} />
        </Col>
        <Col span={12}>
          <Statistic title='Total Markets' value={millify(globalStats?.totalMarkets)} />
        </Col>
      </Row>
      <div className="home-heading-container">
        <Title level={2} className="home-title">Top 10 Cryptos In The World</Title>
        <Title level={3} className="show-more"><Link to="/cryptocurrencies">Show more</Link></Title>
      </div>
      <Cryptocurrencies simplified />
      <div className="home-heading-container">
        <Title level={2} className="home-title">Latest Crypto News</Title>
        <Title level={3}><Link to="/news">Show more</Link></Title>
      </div>
      <News simplified />
    </>
  );
};
export default Homepage;

>Solution :

This appear to be a bug in the millify package. Specifically, millify takes a value and converts it to a string. While doing this, it first attempts to parse the string value. They correctly check to see if the value is a number or not, but they fail to check if the value actually exists:

Problematic code

Reproduced here for commenting:

export function parseValue(value: number): number {
  const val: number = parseFloat(value.toString());

  if (isNaN(val)) {
    throw new Error(`Input value is not a number`);
  }
  if (val > Number.MAX_SAFE_INTEGER || val < Number.MIN_SAFE_INTEGER) {
    throw new RangeError("Input value is outside of safe integer range");
  }
  return val;
}

The error is on the first line, since value might not exist, and calling .toString on an undefined value will give you the error you are seeing.

The ideal fix would be for millify to solve it on their end and push a package update, but that won’t solve your immediate issue. To solve your immediate issue, make sure you never pass undefined or null to millify, so:

// Change this
millify(globalStats?.totalExchanges)

// To this
millify(globalStats?.totalExchanges || 0)