Multiple errors on frontend deployed to Sodium

Very happy to be onboarded to Sodium now. I have upgraded dfx to 0.6.12, and I’ve been able to successfully deploy to my local IC node, and my frontend is able to interact just fine with my backend canister. I do an update call and maybe a couple query calls. No errors when I’m running locally over localhost.

I have deployed the application to Sodium, and the frontend does load, which is awesome. But I can’t make any query or update calls with the agent. I have multiple errors in the console:

VM91 worker.js:2 Uncaught Error: Invalid message received: {"target":"inpage","data":{"name":"publicConfig","data":{"isUnlocked":false,"networkVersion":"1","chainId":"0x1"}}}
    at t.ProxyStubAgent.onmessage (VM91 worker.js:2)
    at VM91 worker.js:2
Uncaught (in promise) TypeError: Cannot read property 'postMessage' of null
    at t.ProxyAgent._backend (bootstrap.js:2)
    at bootstrap.js:2
    at new Promise (<anonymous>)
    at t.ProxyAgent._sendAndWait (bootstrap.js:2)
    at t.ProxyAgent.query (bootstrap.js:2)
    at r.get_entities (bootstrap.js:2)
    at HTMLElement.eval (eval at _loadJs (bootstrap.js:2), <anonymous>:2:16233)
    at Generator.next (<anonymous>)
    at eval (eval at _loadJs (bootstrap.js:2), <anonymous>:2:15762)
    at new Promise (<anonymous>)

There are also some warnings. You can see the application with all of its errors and warnings here: https://xz3rs-wuaaa-aaaaa-aaaaa-aaaaa-aaaaa-aaaaa-q.ic0.app/

Using Chrome Version 83.0.4103.106 (Official Build) (64-bit)

It seems that the IC web worker doesn’t like the messages passed by MetaMask (or any extension) – try by disabling Metamask (or have another browser-profile) in the meanwhile, it should fix it :slight_smile:

EDIT: just tested with a browser without metamask, it still does not work.

That seems to get rid of the first error (I tried in an incognito window and Brave instead of Chrome, where I don’t have MetaMask installed), the second error remains and I can’t execute any query or update calls:

bootstrap.js:2 Uncaught (in promise) TypeError: Cannot read property 'postMessage' of null
    at t.ProxyAgent._backend (bootstrap.js:2)
    at bootstrap.js:2
    at new Promise (<anonymous>)
    at t.ProxyAgent._sendAndWait (bootstrap.js:2)
    at t.ProxyAgent.query (bootstrap.js:2)
    at r.get_entities (bootstrap.js:2)
    at HTMLElement.eval (eval at _loadJs (bootstrap.js:2), <anonymous>:2:16233)
    at Generator.next (<anonymous>)
    at eval (eval at _loadJs (bootstrap.js:2), <anonymous>:2:15762)
    at new Promise (<anonymous>)

It looks like there is some iframe whose contentWindow property is null when deployed to Sodium, but is defined when running locally.

Ah, so in my frontend I was using document.write to blow everything away and put my app in. I guess that doesn’t work. I instead created my root element and just added it to the body, and now it works!

2 Likes