Error when calling canister method from React app

Developers
1

Hello
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?

2

Hello,

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

3

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

3 Likes
4

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?

5

@kpeacock
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?

6

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

9

Great timing on this :slight_smile:

10

Hi @kpeacock , I’m suffering the same problem. Is there advice anywhere on what should be in the webpack config to ensure the canisterId gets passed to the createActor method?

11

You can pass the canister id manually as a string or Principal, or you should make sure that Webpack is setting up the EnvironmentPlugin with your canister correctly, matching the process.env variable in your generated index.js.

I’ve also simplified the configuration for the next version of dfx, so there should be less configuration in new projects once it goes out

1 Like