cal.com
cal.com copied to clipboard
calcom
[CAL-4694] embed issue with react 18.2
looks like there is some problem with the react code for pop via element click. (using next15 and react 18.2)
Code is in the comments below
💎 $20 bounty • Cal.com, Inc.
Steps to solve:
- Submit work: Create a pull request including
/claim #17563in the PR body to claim the bounty - Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts
Thank you for contributing to calcom/cal.com!
Add a bounty • Share on socials
![algora-pbc[bot] avatar](https://avatars.githubusercontent.com/in/275896?v=4 "Published by a pub.dev verified publisher"){kind=small}
/attempt #17563
| Algora profile | Completed bounties | Tech | Active attempts | Options |
|---|---|---|---|---|
| @itsalam | 1 cal bounty | TypeScript, JavaScript, Python |
Cancel attempt |
***EDIT: Found it, Seems to exist specifically with next.
@PeerRich Could you provide some more reproduction steps? I've created an inline HTML at packages/embeds/embed-react:
<html>
<head>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script type="module" src="./test.tsx"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
As well as copied your file and adjusted to render to the html:
test.tsx:
import { useEffect } from "react";
import * as React from "react";
import ReactDom from "react-dom";
import { getCalApi } from "./dist/Cal.es.mjs";
function App() {
useEffect(() => {
(async function () {
const cal = await getCalApi({
namespace: "project-call",
});
cal("ui", {
styles: { branding: { brandColor: "#000000" } },
hideEventTypeDetails: false,
layout: "month_view",
});
})();
}, []);
return (
<button data-cal-namespace="project-call" data-cal-link="pro" data-cal-config='{"layout":"month_view"}'>
Click me
</button>
);
}
ReactDom.render(<App />, document.getElementById("root"));
And it seems to run just fine on my end.
Hey @PeerRich based on your description about the issue and the shared code, I've managed to come up with this solution 👇.
'use client';
import { getCalApi } from "@calcom/embed-react";
import { useEffect } from "react";
export default function MyApp() {
useEffect(() => {
(async () => {
const cal = await getCalApi({
namespace: "project-call",
});
if (cal) {
cal("ui", {
styles: { branding: { brandColor: "#000000" } },
hideEventTypeDetails: false,
layout: "month_view",
});
}
})();
}, []);
return (
<button
data-cal-namespace="project-call"
data-cal-link="shaahid/project-call"
data-cal-config='{"layout":"month_view"}'
>
Click me
</button>
);
}
Hey, @PeerRich , please let me know if the issue was not solved. I'll try to reimplement the solution.
Thanks!
After going through the imports, it seems that Next 15 doesn't seem to be properly downgrading to React 18, even when specified in the package manager. This can be checked by logging the React package, which should contain its version.
The issue shown is a bug where mismatching react versions are being referenced: https://stackoverflow.com/questions/66194269/typeerror-cannot-read-propertyreactcurrentdispatcherof-undefined
There isn't much discussion, or a straightforward way to properly downgrade to React 18 on Next 15. While this could be remedied by either:
- upgrading the react dependecies to react 19, or
- to downgrade to Next 14, which properly works with React 18.
Which kinda sucks since either option is much more of a headache than whats bargained for.
Found this test in nextjs, which tests that it uses their own provided canary/experimental build for React: https://github.com/vercel/next.js/blob/676a3bad83a948e76454ac37faa4db2420d57b57/test/e2e/app-dir/rsc-basic/rsc-basic.test.ts#L529.
Seems that for now, any stable version of React 18 + Next 15 will not be compatible.
export default function CalEmbed() {
const HTML = `<!-- Cal inline embed code begins -->
<div style="width:100%;height:100%;overflow:scroll" id="my-cal-inline"></div>
<script type="text/javascript">
(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal =
C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || [];
d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function ()
{ p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; if(typeof namespace === "string")
{cal.ns[namespace] = cal.ns[namespace] || api;p(cal.ns[namespace], ar);p(cal, ["initNamespace", namespace]);}
else p(cal, ar); return;} p(cal, ar); }; })(window, "https://app.cal.com/embed/embed.js", "init");
Cal("init", "15min", {origin:"https://cal.com"});
Cal.ns["15min"]("inline", {
elementOrSelector:"#my-cal-inline",
config: {"layout":"month_view"},
calLink: "username/15min",
});
Cal.ns["15min"]("ui", {"styles":{"branding":
{"brandColor":"#000000"}},"hideEventTypeDetails":false,"layout":"month_view"});
</script>
<!-- Cal inline embed code ends -->`
// biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
return <div dangerouslySetInnerHTML={{ __html: HTML }} />
}
This is working in the interim for anyone building on Next.js 15 that needs to embed Cal. Just replace the HTML const with your HTML code from Cal.
For me #17790 did fix this, can you verify? so upgrading react-embed to 1.5.2 may work cc @Praashh
Hey @keithwillcode @hariombalhara could you please check on if this bounty applies to that issue being solved by #17790, that fixed it for me, can you verify? so upgrading react-embed to 1.5.2 may work
Tested and it works now.
https://github.com/zhyd1997/cal-embed-react-demo/pull/1
https://github.com/user-attachments/assets/bc9041d6-01f3-4093-a512-a31edd7bdb4c
Hello everyone, can you please check if it works now or not?
I think it is fixed now. #23406
It seems that the issue might be fixed now. Unless someone shares a recording that this is still an issue, I would prefer to close this issue soon.
