Appearance

Troubleshooting Gatsby ​

If you're using a framework like Gatsby and are running into build errors, check out some common errors below, and how to resolve them.

iframe not initialized ​

If you encounter an error like the one below:

iframe not initialized

There is likely an issue with how you are rendering the PrivyProvider component within your app.

Namely, if you are using Gatsby's wrapRootElement to wrap your app with the PrivyProvider, you should use wrapPageElement instead, like below:

tsx
import React from 'react';

import {PrivyProvider} from '@privy-io/react-auth';

export const wrapPageElement = ({element}) => {
  return <PrivyProvider appId={'insert-your-app-id'}>{element}</PrivyProvider>;
};

Though Gatsby typically recommends using wrapRootElement for React Contexts, the PrivyProvider component contains UI (HTML) elements as well, including a dialog (the Privy modal) and an iframe (the Privy iframe, used for embedded wallets). Given these UI elements, wrapPageElement must be used instead of wrapRootElement.

INFO

Still have questions? Reach out to [email protected] – we're here to help!