#Errors while Integrating calendly

1 messages · Page 1 of 1 (latest)

polar leaf
#

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?

image.png
bright oarBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

round forge
polar leaf
#

i have a folder named 'contact-us' and its in the code of page.jsx

round forge
# polar leaf https://codefile.io/f/u4aD9r5mUs

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
polar leaf
#

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:

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

this also cause the original error

polar leaf