Next.js Discord

Discord Forum

Errors while Integrating calendly

Unanswered
Dwarf Crocodile posted this in #help-forum
Open in Discord
Dwarf CrocodileOP
Hey, in my CRA i was using calendly like:
<PopupButton
                  url="https://calendly.com/carty-abc/30min"
                  rootElement={document.getElementById("root")}
                  className="group w-fit inline-flex self-center justify-center px-4 py-2 gap-1 border border-transparent text-base font-medium rounded-full bg-[#323232] text-white hover:bg-[#2e3751] transition duration-300 ease-in-out"
                  text={
                    <>
                      Schedule
                      <span className="w-0 overflow-hidden inline-block transition-all duration-300 group-hover:w-5">
                        <ArrowRight
                          width={18}
                          className="text-xs opacity-0 translate-x-0 transition-all duration-300 group-hover:opacity-100 "
                        />
                      </span>
                    </>
                  }
                />


When i moved this to Next, i was facing error: [react-calendly]: PopupModal rootElement property cannot be undefined

Then i changed to rootElement={document.body}

Now I am seeing this new error in console. (photo attached).
Although my calendly is scheduling things just fine. Anyone know what this error is about?

10 Replies

Dwarf CrocodileOP
i have a folder named 'contact-us' and its in the code of page.jsx
https://codefile.io/f/u4aD9r5mUs
@Dwarf Crocodile https://codefile.io/f/u4aD9r5mUs
B33fb0n3
thanks for sharing. Change the Import of the PopupButton to this:
const PopupButton = dynamic(() => import('react-calendly'), { ssr: false }) // check if the import location is correct. Your IDE will tell you
Dwarf CrocodileOP
import location?
i am getting this error: Error: Element type is invalid. Received a promise that resolves to: [object Module]. Lazy element type must resolve to a class or function
gpt telling to do something like:

const PopupButton = dynamic(
  () => import("react-calendly").then((mod) => mod.PopupButton),
  { ssr: false }
);
this also cause the original error
@Dwarf Crocodile gpt telling to do something like: const PopupButton = dynamic( () => import("react-calendly").then((mod) => mod.PopupButton), { ssr: false } );
B33fb0n3
ah yea, mb. Gpt suggested the right thing. I guess, then you just can accept this error...