Hi,
I’ve been following two quick-start guides today, and I ran into a bunch of issues. All of them were fixable in the end, and I managed to make the tutorial work, and I thought I’d document my steps here, in case someone else has the same problems.
For the dfinity devs, was I doing something wrong or are there any more up to date tutorials that I should follow?
The tutorials I was following:
I’m working on a clean install of Ubuntu 20.04, with all the dev-tools, dependencies, node, cmake etc. installed.
:~/work/dfinity/hello$ dfx --version
dfx 0.7.2
The first step in the tutorial that differed for me: I was getting two missing dependencies warnings at npm install.
:~/work/dfinity/hello$ npm install
npm WARN @dfinity/agent@0.9.1-beta-1 requires a peer of @dfinity/candid@^0.9.1-beta-1 but none is installed. You must install peer dependencies yourself.
npm WARN @dfinity/agent@0.9.1-beta-1 requires a peer of @dfinity/principal@^0.9.1-beta-1 but none is installed. You must install peer dependencies yourself.
When I ignored the warnings, the next step failed with errors:
~/work/dfinity/hello$ dfx build
Building canisters...
Building frontend...
The post-build step failed for canister 'ryjl3-tyaaa-aaaaa-aaaba-cai' with an embedded error: The command '"npm" "run" "build"' failed with exit status 'exit code: 1'.
Stdout:
[...]
ERROR in ./node_modules/@dfinity/agent/lib/esm/actor.js 5:0-38
Module not found: Error: Can't resolve '@dfinity/candid' in '/home/ubuntu/work/dfinity/hello/node_modules/@dfinity/agent/lib/esm'
[...]
ERROR in ./node_modules/@dfinity/agent/lib/esm/actor.js 7:0-47
Module not found: Error: Can't resolve '@dfinity/principal' in '/home/ubuntu/work/dfinity/hello/node_modules/@dfinity/agent/lib/esm'
I fixed these errors with the following commands:
:~/work/dfinity/hello$ npm install @dfinity/candid
:~/work/dfinity/hello$ npm install @dfinity/principal
After this dfx build / dfx deploy worked as intended, and deployment was successful. I verified that the deployment worked with this:
:~/work/dfinity/hello$ dfx canister call hello greet everyone
("Hello, everyone!")
The next problem was when trying the web interface. I loaded the url of the assets canister (http://127.0.0.1:8000/?canisterId=ryjl3-tyaaa-aaaaa-aaaba-cai in my case) in 3 different browsers and all three were showing the same error in the console
Uncaught (in promise) Error: Fail to verify certificate
at Et (index.js:2)
at async r (index.js:2)
at async HTMLButtonElement.<anonymous> (index.js:2)
The “click me!” button was not working.
After reading through some topics on this forum, I found a fix - add “agent.fetchRootKey();” in hello_assets/src/index.js, before performing the hello.greet call.
Listing for my index.js after the edit:
import { Actor, HttpAgent } from '@dfinity/agent';
import { idlFactory as hello_idl, canisterId as hello_id } from 'dfx-generated/hello';
const agent = new HttpAgent();
const hello = Actor.createActor(hello_idl, { agent, canisterId: hello_id });
agent.fetchRootKey();
document.getElementById("clickMeBtn").addEventListener("click", async () => {
const name = document.getElementById("name").value.toString();
const greeting = await hello.greet(name);
document.getElementById("greeting").innerText = greeting;
});
After rebuilding and redeploying the sample app seems to work properly, and I get the greeting displayed in the web interface as well.
Perhaps something got broken during an update, and someone forgot to update the tutorials?