# Cannot read property 'prefix' of undefined Error when call smart contract

**URL:** <https://gov.near.org/t/cannot-read-property-prefix-of-undefined-error-when-call-smart-contract/34126>\
**Category:** Education\
**Created:** [April 16, 2023, 4:43pm UTC](https://gov.near.org/t/cannot-read-property-prefix-of-undefined-error-when-call-smart-contract/34126 "2023-04-16T16:43:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![neuneu](https://dub1.discourse-cdn.com/flex005/user_avatar/gov.near.org/neuneu/32/46269_2.png) [@neuneu](https://gov.near.org/u/neuneu)\
**Post date:** [April 16, 2023, 4:43pm UTC](https://gov.near.org/t/cannot-read-property-prefix-of-undefined-error-when-call-smart-contract/34126/1 "2023-04-16T16:43:54Z")

</div>

I’m building an E platform project where users can purchase in NEAR using React and typescript. I get that error when I click to confirm the transaction:

```auto
Sorry an error has occurred. You may want to try again.

{"index":0,"kind":{"ExecutionError":"Smart contract panicked: cannot read property 'prefix' of undefined\n at reconstruct (build/hello_near.js:1017)\n at _reconstruct (build/hello_near.js:1131)\n at purchaseBasket (build/hello_near.js:1207)\n"}}, 

```

The smart contract is written in typescript:

```auto
import { NearBindgen, near, call, view, UnorderedMap, initialize } from 'near-sdk-js';

@NearBindgen({})

class MyContract {
    beneficiary: string = "mywallet.testnet";

    orders = new UnorderedMap<Order[]>("orders");

    @initialize({ privateFunction: true })
    init({ beneficiary }: { beneficiary: string }) {
        this.beneficiary = beneficiary
    }

    @call({payableFunction: true})
    purchaseBasket({basket, totalPrice}: {basket: OrderItem[]; totalPrice: number}) {
        near.log(basket, totalPrice);
        // Get who is paying
        let sender = near.predecessorAccountId();
        let donationAmount: bigint = near.attachedDeposit() as bigint;
        near.log(sender, donationAmount);

        // Send NEAR token to the beneficiary
        const promise = near.promiseBatchCreate(this.beneficiary)
        near.promiseBatchActionTransfer(promise, donationAmount);

        // Update sender orders
        let currentOrders = this.orders.get(sender, {defaultValue: []}) || [];
        near.log(currentOrders);
        currentOrders.push({
            items: basket,
            totalPrice: totalPrice,
            timestamp: near.blockTimestamp()
        });
        near.log(currentOrders);
        this.orders.set(sender, currentOrders);
        near.log(this.orders);
    }

    @view({})
    getOrders({accountId}: {accountId: string}): Order[] {
        let ordersList = this.orders.get(accountId, {defaultValue: []});
        return ordersList;
    }
}
class OrderItem {
    id: string;
    name: string;
    priceInDollar: number;
    url: string;
    quantity: number;
}

class Order {
    items: OrderItem[];
    totalPrice: number;
    timestamp: bigint;
}

```

Note that none of the near.log() log anything in the web inspector.  
And this is where the call method is called:

```auto
import React, {useState, useEffect} from 'react';

import {addToBasket, removeFromBasket, removeItemFromBasket, resetBasket} from '../app/basketSlice.js';
import {useSelector, useDispatch} from 'react-redux';

import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import Spinner from 'react-bootstrap/Spinner';

import {Img} from 'react-image';

import '../assets/global.css';

import {utils} from 'near-api-js';

export const Basket = ({isSignedIn, contractId, wallet}) => {

    const [nearToDollar, setNearToDollar] = useState(0);

    const basket = useSelector(state => state.items);
    const total = useSelector(state => state.totalPrice);
    const dispatch = useDispatch();

    useEffect(() => {
        const getNearToDollar = async() => {
            let data = await fetch("https://api.coingecko.com/api/v3/simple/price?ids=near&vs_currencies=usd").then(response => response.json())
            const near2usd = data['near']['usd']
            const amount_in_near = 1 / near2usd
            const rounded_two_decimals = Math.round(amount_in_near * 100) / 100;
            setNearToDollar(rounded_two_decimals);
        }
        getNearToDollar();
    }, []);

    const handleOrder = async() => {
        const amountInNear = total*nearToDollar;
        let deposit = utils.format.parseNearAmount(amountInNear.toString());
        return await wallet.callMethod({
            contractId: contractId,
            method: 'purchaseBasket',
            args: {
                basket: basket,
                totalPrice: total
            },
            deposit
        })
        
    }

    const connect = () => {wallet.signIn()}

    const handleResetBasket = () => {
        dispatch(resetBasket());
    }

    const handleAddToBasket = (item) => {
        dispatch(addToBasket(item));
    }

    const handleRemoveFromBasket = (item) => {
        dispatch(removeFromBasket(item));
    }

    const handleRemoveItem = item => {
        dispatch(removeItemFromBasket(item));
    }

    return (
        <Container>
            <div className='mt-5 mb-5 d-flex justify-content-between'>
                <h1>Your Basket</h1>
                <Button onClick={handleResetBasket}>Reset Basket</Button>
            </div>
            <Container className='d-flex flex-wrap justify-content-center'>
                {basket.map((item, index) => {
                    return (
                        <Card className='d-flex flex-column m-2' key={index} style={{ width: '18rem' }}>
                            <Img className='m-1' variant="top" src={item.url} loader={<Spinner animation="border" role="status"></Spinner>}/>
                            <Card.Body className='d-flex flex-column justify-content-end'>
                                <Card.Title className='d-flex justify-content-between'>
                                    <div>{item.name}</div>
                                    <div>{item.quantity}</div>
                                </Card.Title>
                                <Card.Text>
                                    $ {item.priceInDollar*item.quantity} = {item.priceInDollar*nearToDollar*item.quantity} Ⓝ 
                                </Card.Text>
                                <div className='d-flex justify-content-between'>
                                    <Button className='rounded-button' variant='secondary' onClick={() => handleAddToBasket(item)}>+</Button>
                                    <Button className='rounded-button' variant='secondary' onClick={() => handleRemoveFromBasket(item)}>-</Button>
                                    <Button variant="danger" onClick={() => handleRemoveItem(item)}>Remove</Button>
                                </div>
                            </Card.Body>
                        </Card>
                    ) 
                })}
            </Container>
            <h3>Total: $ {total} = {nearToDollar*total} Ⓝ </h3>
            {isSignedIn? (
                <Button onClick={handleOrder}>Buy</Button>
            ) : (
                <Button onClick={connect}>Connect Wallet</Button>
            )}
        </Container>
    )
}

```

Do you have any idea what I’m doing wrong?  
Thanks.

---

<div class="post-metadata">

**Author:** ![chi.ha](https://dub1.discourse-cdn.com/flex005/user_avatar/gov.near.org/chi.ha/32/46388_2.png) [@chi.ha](https://gov.near.org/u/chi.ha)\
**Post date:** [April 17, 2023, 1:34am UTC](https://gov.near.org/t/cannot-read-property-prefix-of-undefined-error-when-call-smart-contract/34126/2 "2023-04-17T01:34:17Z")

</div>

Hi @neuneu I’m not a dev so cannot offer you a solution but you can also ask your question in dev-support channel in NEAR [Discord](https://near.chat). Hope your issue will be resolved soon!

---

<div class="post-metadata">

**Author:** ![bailey12](https://dub1.discourse-cdn.com/flex005/user_avatar/gov.near.org/bailey12/32/4524_2.png) [@bailey12](https://gov.near.org/u/bailey12)\
**Post date:** [April 21, 2023, 2:56pm UTC](https://gov.near.org/t/cannot-read-property-prefix-of-undefined-error-when-call-smart-contract/34126/3 "2023-04-21T14:56:45Z")

</div>

Sorry for the late reply, here are some potential issues that could cause bugs for the first snippet:

1. The `OrderItem` and `Order` classes are not imported, so they may cause issues if they are not defined elsewhere in the code.
2. The `beneficiary` variable is hard-coded to `"mywallet.testnet"`. It is not clear whether this is the intended behavior or whether it should be set dynamically.
3. The `getOrders` function does not have a decorator for its arguments. It is possible that this may cause issues with the function’s behavior.
4. The `near.attachedDeposit()` function returns a string, but it is being cast to a `bigint`. This may cause issues if the attached deposit is not a valid `bigint`.
5. The `promiseBatchCreate` function is being called with a single argument. According to the `near-sdk-js` documentation, this function takes two arguments: a list of actions and an optional transaction metadata object.
6. The `promiseBatchActionTransfer` function is being called with a single argument. According to the `near-sdk-js` documentation, this function takes three arguments: a batch promise, the recipient account ID, and the transfer amount.

For the second snippet:

1. The `basket`, `total`, and `isSignedIn` props are assumed to be defined, but there is no check for their existence before using them. This could lead to runtime errors if they are not provided.
2. The `handleOrder` function assumes that the `wallet` object is defined and has a `callMethod` method. It might be a good idea to add a check for the existence of these before calling the method.
3. The `handleAddToBasket`, `handleRemoveFromBasket`, and `handleRemoveItem` functions assume that the `dispatch` function is defined. It might be a good idea to add a check for the existence of `dispatch` before using it.
4. The `Img` component from the `react-image` library is used without a fallback `src` attribute. This means that if the image fails to load, there will be no alternative displayed. It might be a good idea to add a `src` attribute with a placeholder image URL or a fallback component to handle errors.

Try to double check all of these and if it is still not working, pls follow @chi.ha 's suggestion

---

<div class="post-metadata">

**Author:** ![neuneu](https://dub1.discourse-cdn.com/flex005/user_avatar/gov.near.org/neuneu/32/46269_2.png) [@neuneu](https://gov.near.org/u/neuneu)\
**Post date:** [April 21, 2023, 9:16pm UTC](https://gov.near.org/t/cannot-read-property-prefix-of-undefined-error-when-call-smart-contract/34126/4 "2023-04-21T21:16:36Z")

</div>

Hi, thanks for your response both.  
Yes my smart contract can certainly be written better but I don’t think there was any error.  
I couldn’t explain why but I removed my `build/`, `neardev/` and `node_modules/` folders, then run `npm install` and `npm run deploy` and it was all working fine…