nextjs Target container is not a DOM element

[adham618]

in nextjs it gives me this error
@tcampb
any help?

[tcampb]

@adham618 - it looks like the error message is missing, could you try reposting it?

[adham618]

all I did is to write this

import * as React from 'react';
import { PopupButton } from 'react-calendly';

export default function calendlyBtn () {
  return (
    <div>
      <PopupButton
        url='https://calendly.com/adham-tarek'
        /*
         * react-calendly uses React's Portal feature (https://reactjs.org/docs/portals.html) to render the popup modal. As a result, you'll need to
         * specify the rootElement property to ensure that the modal is inserted into the correct domNode.
         */
        rootElement={document.getElementById('root');}
        text='Click here to schedule!'
      />
    </div>
  );
}

this is the error

[tcampb]

Thanks for providing the code example and screenshot. I'm not too familiar with Next.js SSR, but based on this stackoverflow post it sounds like you'll need to update the calendlyBtn component to only render on the client-side.

[adham618]

pls can you tell me what is wrong
https://stackblitz.com/edit/nextjs-ptw1gh?file=pages/index.js

[adham618]

now it works in local but the same code not working in stackblitz

[tcampb]

@adham618 - could you instead check if the window is defined before rendering the component? Again, I'm not very familiar with nextjs so I'm not sure if this is a best practice or not, but the code is working for me on the example app you provided.

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { PopupButton } from 'react-calendly';
//import ClientOnlyPortal from '../lib/ClientOnlyPortal';

export default function Home() {
  return (
    <div className={styles.container}>
      {typeof window !== 'undefined' && (
        <PopupButton
          url="https://calendly.com/adham-tarek"
          rootElement={document.getElementById('__next')}
          text="Click here to schedule!"
        />
      )}
    </div>
  );
}

[adham618]

thanks, it worked fine with me now

[abrichr]

The above solution was causing an error for me:

Error: Hydration failed because the initial UI does not match what was rendered on the server.

The fix is to move the condition inside the attribute definition:

<PopupButton
  ...
  rootElement={typeof window !== "undefined" ? document.getElementById("__next") : null}
  ...
/>

[KarthikRaju391]

Maybe you can try importing the components using next/dynamic. This makes sure that the library is client dependent.

import dynamic from "next/dynamic";

const PopupButttonComp = dynamic(
	() => import("react-calendly").then((mod) => mod.PopupButton),
	{
		ssr: false,
	}
);

[ProspDev]

I got this error when using react-calendly in next.js.

Server Error
TypeError: Object prototype may only be an Object or null: undefined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
setPrototypeOf

extendStatics
node_modules\react-calendly\dist\index.js (28:11)
extendStatics
node_modules\react-calendly\dist\index.js (32:4)
__extends
node_modules\react-calendly\dist\index.js (170:4)
React
node_modules\react-calendly\dist\index.js (181:2)
Object.(rsc)/./node_modules/react-calendly/dist/index.js
file:///D:/_PCH/_PPP/next-calendly/.next/server/app/calendly/page.js (1569:1)
webpack_require
file:///D:/_PCH/_PPP/next-calendly/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./app/calendly/page.js (8:72)
Object.(rsc)/./app/calendly/page.js
file:///D:/_PCH/_PPP/next-calendly/.next/server/app/calendly/page.js (964:1)
Function.webpack_require
file:///D:/_PCH/_PPP/next-calendly/.next/server/webpack-runtime.js (33:42)

What is the solution?

[tcampb]

Hey @ProspDev - if you are using the new app directory in next 13 you'll need to add 'use client'; to the top of your component file.

See #158 (comment) for additional details.

[ProspDev]

Hi, @tcampb . It works well for me. Thanks for your help. :)

[ProspDev]

My code is as follows

"use client";

import React from 'react';
import {PopupButton } from 'react-calendly';

export default function Calendly() {
return (

{typeof window !== 'undefined' && (
<PopupButton
url="https://calendly.com/psoekdev"
rootElement={document.getElementById('__next')}
text="Click here to schedule!"
/>
)}

)
}

But I got this error.

Unhandled Runtime Error
Error: [react-calendly]: PopupModal rootElement property cannot be undefined

I can't find solution. please help

[ProspDev]

What is the solution for this error?

[tcampb]

The code example assumes that you have an element in the document with an id of __next, if you don't then the modal will fail to attach to the DOM since the rootElement is null.

<div id="__next"></div>

The rootElement property is using react portals, so you'll need to specify a DOM element where you want the popup modal to be attached to.

For the typescript error you can use the non null assertion operator to tell the compiler that the value will not be null.

[Kolosafo]

It doesn't work

[Kolosafo]

#FIRST! make sure you have an html element with the same id as the one you're targeting in your rootElement prop. This can be the root div of the component where you want to use it or in the layout folder. Just make sure that is out of the way... Then

Use dynamic Import to import the component where you want to use it.
For the typescript error, use the non null assertion operator or turn the component to a jsx file

Below is my own working calendlyPop component file

`import { PopupWidget } from "react-calendly";

import React from "react";

const CalendlyPop = () => {
return (
<PopupWidget
url="https://calendly.com/your-event"
rootElement={document.getElementById("root")}
text="Click here to schedule!"
textColor="#ffffff"
color="#00a2ff"
/>
);
};

export default CalendlyPop;`

Usage:
const CalendlyPopUp = dynamic(() => import("./components/calendlyPopup"), { ssr: false, });

Then you can simply render your component as such:
<CalendlyPopUp />

Hope this helps.

[juliaaschmidt]

None of the above actually fixed my issue.

I have managed to solve it here: https://stackoverflow.com/a/77369603/9553902

[ln-dev7]

None of the above actually fixed my issue.

I have managed to solve it here: https://stackoverflow.com/a/77369603/9553902

This also helped me solve the problem !

[Muhammadalikaj]

Its wokring
'use client';
import React from 'react';
import { PopupButton } from 'react-calendly';

const Calendly = () => {
const rootElement = document.getElementById('root');

if (!rootElement) {
console.error('Root element not found');
return null;
}

return (

);
};

export default Calendly;

[pedromxavier14]

You can use like this:

<PopupWidget
            url={"XXX"}
            text={
              "XXX"
            }
            color={"#3F6DA2"}
            rootElement={document.body}
          />

[mimarchant]

@adham618 - could you instead check if the window is defined before rendering the component? Again, I'm not very familiar with nextjs so I'm not sure if this is a best practice or not, but the code is working for me on the example app you provided.

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { PopupButton } from 'react-calendly';
//import ClientOnlyPortal from '../lib/ClientOnlyPortal';

export default function Home() {
  return (
    <div className={styles.container}>
      {typeof window !== 'undefined' && (
        <PopupButton
          url="https://calendly.com/adham-tarek"
          rootElement={document.getElementById('__next')}
          text="Click here to schedule!"
        />
      )}
    </div>
  );
}

this worked for me, you're a life saver <3