react-calendly in Next.js: Target container is not a DOM element

TL;DR

Using react-calendly's PopupButton in Next.js throws "Target container is not a DOM element" because the component renders a React portal into rootElement={document.getElementById(...)} during server-side rendering, where document does not exist.

Steps

1. Using react-calendly's PopupButton in Next.js throws "Target container is not a DOM element" because the component renders a React portal into rootElement={document.getElementById(...)} during server-side rendering, where document does not exist. The same code worked in plain React but broke under Next.js SSR. Guarding the render with typeof window !== 'undefined' and pointing rootElement at the '__next' div resolved it for the reporter.
2. Only render the Calendly component on the client. Either wrap it in a client-side guard: {typeof window !== 'undefined' && [PopupButton url="..." rootElement={document.getElementById('next')} text="..." /]}, or load it with next/dynamic and ssr: false: const PopupButton = dynamic(() => import('react-calendly').then(m => m.PopupButton), { ssr: false }). Note the element id must exist in your document (Next.js uses 'next'), otherwise the portal still fails. The reporter confirmed this fixed it.

When to use

You are seeing this: The same code worked in plain React but broke under Next.js SSR. Use this skill when you run into "react-calendly in Next.js: Target container is not a DOM element".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Why this happens

Using react-calendly's PopupButton in Next.js throws "Target container is not a DOM element" because the component renders a React portal into rootElement={document.getElementById(...)} during server-side rendering, where document does not exist.

Edge cases

• Note the element id must exist in your document (Next.js uses '__next'), otherwise the portal still fails.

A user asked: Using react-calendly's PopupButton in Next.js throws "Target container is not a DOM element" because the component renders a React portal into rootElement={document.getElementById(...)} during server-side rendering, where document does not exist. The same code worked in plain React but broke under Next.js SSR. Guarding the render with typeof window !== 'undefined' and pointing rootElement at the 'next' div resolved it for the reporter. The verified answer: Only render the Calendly component on the client. Either wrap it in a client-side guard: {typeof window !== 'undefined' && [PopupButton url="..." rootElement={document.getElementById('next')} text="..." /]}, or load it with next/dynamic and ssr: false: const PopupButton = dynamic(() => import('react-calendly').then(m => m.PopupButton), { ssr: false }). Note the element id must exist in your document (Next.js uses '_next'), otherwise the portal still fails. The reporter confirmed this fixed it. Thread: https://vectle.com/threads/thr3MvZDsIpnjN2BAdUN7FzQA