Next JS

This section lists some common compatibility requirements and how to address them

Running into an issue and don't see something here? Get in touch!

Server Side Rendering

There's a known incompatibility issue with Capsule CSS loading with apps using Next.js SSR. As a temporary workaround, we recommend the following

1. Add 'style-loader' and 'css-loader' as dev dependencies for your project.

yarn add style-loader css-loader --dev

2. Make the following change to your next.config.js file

module.exports = {
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    config.resolve.fallback = {
      ...config.resolve.fallback, // The rest of your fallbacks if necessary
      fs: false,
      crypto: 'crypto-browserify'
    }
    return config
  }
}

3. Use dynamic imports to load the Capsule Components as follows

const [CapsuleModalComponent, setCapsuleModalComponent] = useState<FC<{ capsule: any; appName: string; }> | null>(null);
const [capsuleInstance, setCapsuleInstance] = useState(null);

async function loadCapsule() {
  let loadedInstance;
  if (!capsuleInstance) {
    const CapsuleModule = await import('@usecapsule/react-sdk');
    loadedInstance = new CapsuleModule.default(CapsuleModule.Environment.DEVELOPMENT);
  }
  return loadedInstance;
}

useEffect(() => {
  async function loadCapsuleModule() {
    const { CapsuleModal } = await import('@usecapsule/react-sdk');
    setCapsuleModalComponent(() => CapsuleModal);
  }
  loadCapsuleModule();
}, []);

useEffect(() => {
  loadCapsule().then(capsule => {
    setCapsuleInstance(capsule);
  });
}, []);

// Now you can use the Capsule component as follows
<CapsuleModalComponent capsule={capsuleInstance} appName="WalletConnect" />