Imposible to convert undefined to principal when trying to call a canister from backend

here is my backend functional call:

public query func getAllParties() : async [Text] {
    let parties = Iter.toArray(mapOfPartyListing.keys());
    return parties;
};

Have imported this canister to the frontend as follows:

import { ElecureV1_backend } from ‘@/declarations/ElecureV1_backend’;

and try to call the function:

async function getTeams() {
// try {
const allParties = await ElecureV1_backend.getAllParties();
console.log(allParties);
const allPartiesArray = Array.from(allParties);
console.log(allPartiesArray);
// } catch (error) {
// console.error(error);
// }
}
useEffect(() => {
getTeams();
}, );

1 Like

The declarations use process.env variables to load the canister ID depending on whether you are building for local network or ic. Check the variable names in @/declarations/ElecureV1_backend and try adding console logs to debug!

It will probably be something you can configure with Next.js to load the values from your .env file. Here’s a guide with an approach you may want to try: Environmental Variables in Next.js with dotenv | by Deepak Surya | Courtly & Intrepid | Medium

2 Likes