Gatsby frontend broken after dfx upgrade

Developers
1

I followed Kyle Peacocks tut on static site generators…

All was working until I upgraded dfx to 0.8. Now I’m getting a build error when deploying

Can't resolve 'dfx-generated/contacts' in Actor.js

I’ve tried building the frontend then deploying the canisters, and tried deploying the canisters then building the frontend.

2

I’ll update that post today, thanks for the heads-up. The issue requires an update to the webpack configuration, which you can read here, or just wait for me to update the guide

3

That’s great, thanks Kyle. Loving your tutorial series by the way

4

Okay, I’ve updated the post and the GitHub - krpeacock/ic-vcf-gatsby: Contact card demo app with Internet Computer backend reference code

5

Cool thanks.

On your readme, shouldn’t it be “dfx deploy --network=ic” ? not “npm deploy…”

6

It’s broken again - probably me this time but I can’t figure it out. I integrated Internet Identity and it seemed to work. I stopped the service and redeployed and it wont run the build of the pages now.

This is what I’m getting…

ERROR #95313

Building static HTML failed

  31 |                 ? undefined
  32 |                 : self.fetch.bind(self)
> 33 |             : global.fetch.bind(global)
     | ^
  34 |         : window.fetch.bind(window);
  35 |     if (!result) {
  36 |         throw new Error('Could not find default `fetch`
implementation.');


  WebpackError: TypeError: Cannot read property 'bind' of undefined

  - index.js:33
    [doocoins]/[@dfinity]/agent/lib/esm/agent/http/index.js:33:1

  - index.js:66
    [doocoins]/[@dfinity]/agent/lib/esm/agent/http/index.js:66:1
7

You will need to either polyfill global.fetch during build time with isomorphic-fetch or something similar, or you can delay initializing your actor until the first page load, using a useEffect hook

2 Likes
8

If agent is not absolutely necessary for your pre-rendering, maybe you can also try to use the lib only on the client side (https://www.gatsbyjs.com/docs/using-client-side-only-packages/) ?

Just a guess though…

1 Like
9

I initialized the Actor in a useEffect hook. Like so…


  const initActor = () => {
    import("../declarations/doocoins")
    .then((module) => {
      const actor = module.createActor(module.canisterId, {
        agentOptions: {
          identity: authClient?.getIdentity(),
        },
      });
      setActor(actor);
    })
  };

  React.useEffect(() => {
    AuthClient.create().then(async (client) => {
      const isAuthenticated = await client.isAuthenticated();
      setAuthClient(client);
      setIsAuthenticated(true);
    });
  }, []);

  React.useEffect(() => {
    if (isAuthenticated) initActor();
  }, [isAuthenticated]);
1 Like