Canister ID undefined error

Developers
1

I previously was able to access my frontend. However, after running npm run build, then dfx build, and dfx deploy again, I navigate to the local frontend and receive this error in my console:

main.fb581454.js:2 Uncaught Error: Canister ID is required, but recieved undefined instead. If you are using automatically generated declarations, this may be because your application is not setting the canister ID in process.env correctly.

I am able to access my backend Candid UI.

I confirmed that I do have a .env file with the corresponding canister ids:

# DFX CANISTER ENVIRONMENT VARIABLES

DFX_VERSION='0.14.3'

DFX_NETWORK='local'

APP_CANISTER_ID='bbbbb-4maaa-aaaaa-qaagq-cai'

CANISTER_ID_APP='bbbbb-4maaa-aaaaa-qaagq-cai'

CANISTER_ID_onchainvoting='aovwi-4maaa-aaaaa-qaagq-cai'

BACKEND_CANISTER_ID='ddddd-ruaaa-aaaaa-qaaga-cai'

CANISTER_ID_BACKEND='ddddd-ruaaa-aaaaa-qaaga-cai'

CANISTER_ID_backend='ddddd-ruaaa-aaaaa-qaaga-cai'

CANISTER_ID='ddddd-ruaaa-aaaaa-qaaga-cai'

CANISTER_CANDID_PATH='/Users/princess/Documents/app/src/backend/backend.did'

# END DFX CANISTER ENVIRONMENT VARIABLES

Here is my dfx:

{
  "canisters": {
    "backend": {
      "candid": "src/backend/backend.did",
      "package": "backend",
      "type": "rust"
    },
    "app": {
      "frontend": {
        "dependencies": "backend",
        "entrypoint": "src/index.tsx"
      },
      "source": ["build"],
      "type": "assets"
    }
  },
  "output_env_file": ".env"
}

What could I be doing wrong?

2

What is the URL you are trying to access?

3

I am trying to access http://127.0.0.1:4943/?canisterId=bbbbb-4maaa-aaaaa-qaagq-cai

4

If you add &id=<target canister id> at the end it should work

5

Hmm, adding &id=<target canister id> does not resolve the issue. This is a frontend canister. Would I need to add &id=<target canister id> in the first place?

6

Oh, I see… I thought you were talking about the candid UI.

Are these the URLs dfx deploy prints at the end of its output? These should work as-is. Otherwise you could also try <canister id>.localhost:4943

7

Thank you for the advice! I found that I was getting this error when I was loading a frontend component that was calling the backend declaration file incorrectly. I’ll create another forum thread to ask about that.

1 Like