Error when calling canister method from React app

I’m developing an application locally using ReactJS, but got the following error.

Unhandled Rejection (Error): Impossible to convert undefined to Principal.

Can anyone help me with this?


Can you please provide a bit more information about what you are trying to do? Are you working with Internet Identity?

9 times out of 10, for this error, you are passing an undefined canister ID to the createActor method. Check your webpack config


Thank you for replying!

I’m working for a private project using React and the Internet Computer, but got the error.

So I’m now trying to figure out what causes this error and working with a very simple react app which I just followed the Create New React App document.
But, even the simple react app, I’m getting the same error.

I started IC project with the command below

dfx new dfx_react_app

and started react app on another directory.

npx create-react-app my-app

Then, I copied the files from “src” and whole public directory from the react app and pasted to dfx_react_app directory.

It seems like configuration settings somewhere don’t match each other.
Or do I need to do something else in order to work on both IC and React?

I just checked the webpack.config.js now and remembered that I changed the canister name.

When I launched new dfx project, there were canisters “dfx_react_app” and “dfx_react_app_assets”. But I changed to “service” and “frontend” in dfx.json file.

Does webpack.config.js cause the error?

It’s just preconfigured to hope to spare you needing to modify it. Check the EnvironmentPlugin and make sure it reflects your new canister name

Great timing on this :slight_smile: