Gatsby frontend broken after dfx upgrade

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.

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

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

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

Cool thanks.

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

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`

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

  - index.js:33

  - index.js:66

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


If agent is not absolutely necessary for your pre-rendering, maybe you can also try to use the lib only on the client side ( ?

Just a guess though…

1 Like

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

  const initActor = () => {
    .then((module) => {
      const actor = module.createActor(module.canisterId, {
        agentOptions: {
          identity: authClient?.getIdentity(),

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

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