Could not infer host from window.location

Developers JavaScript
1

Hi,

The first time I load openfpl.xyz I get the following warning:

image
image885×70 3.64 KB

But then if I refresh I get a new range of warnings:

image
image894×378 9.7 KB

So I feel like my react template is setup wrong, I’ve used the latest dfx new setup for ic-assets:

Any help would be appreciated.

2

The first warning comes from agent-js because the agent is created without host property and default to icp-api.io (which works fine for mainnet) cc @kpeacock

2 Likes
3

There is nothing wrong you’re doing here, but I understand the warning may sound concerning. If you are on a custom domain, I encourage you to write your own createActor method and to set the host explicitly to https://icp-api.io.

The way I do this is typically to recreate the index.js from the declarations in my source code, and then to continue importing the idlFactory and types from the autogenerated declarations

1 Like
4

Arent’s the additional warnings you get an issue in your project? I think you are using React which, if created with create-react-app, per default import the Web Vitals. So from the stack trace, I would guess it looks like some metrics cannot be gathered because of the CSP. Either adapt your CSP for those Web Vitals or remove the usage of the report should solve your issue.

1 Like
5

Ok thanks, are there any documents on how I would go about this? I thought I’d just used a standard react template, is there a template for setting up a react app for a custom domain?

1 Like
6

I don’t really have a template, but this is how I did my custom domain example a year ago: https://github.com/krpeacock/custom-domain-example/blob/main/src/site/index.ts#L58

1 Like
7

Thanks mate, I will give this a try and let you know!

8

Hi Kyle,

So I’ve been trying to figure this out for my setup.

In this example I don’t think you’ve used agent-js to create the actor so I’m struggling to use it for my implementation.

image
image720×484 23.5 KB

I’m currently getting an error for the interfaceFactory definition but I can’t see in the agent-js docs how I’d set it up.

Also my react app has some weird behaviour on refresh i can’t figure out. If the page refreshes it loses the logged in state, is there a react example for just basic IID auth I can take a look at?

Thanks,
James

9

Our general pattern is to use the JS bindings from dfx generate, and to import either whoami_actor or the createActor method that’s automatically generated for your canister. See the javascript intro docs.

I don’t really recommend writing your IDL by hand, but you can if you must. It’s generally easier to copy the bindings from the dashboard - pull up the JavaScript tab for the interface on this whoami canister, for example: Canister: ivcos-eqaaa-aaaab-qablq-cai - ICP Dashboard

But if you have to, this should be the file that you need to import the IDL Factory from:

export const idlFactory = ({ IDL }) => {
  return IDL.Service({ 'whoami' : IDL.Func([], [IDL.Principal], ['query']) });
};
1 Like