Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CAL-4694] embed issue with react 18.2 #17563

Open
PeerRich opened this issue Nov 8, 2024 · 12 comments
Open

[CAL-4694] embed issue with react 18.2 #17563

PeerRich opened this issue Nov 8, 2024 · 12 comments
Labels
💎 Bounty A bounty on Algora.io 🐛 bug Something isn't working embed area: embed, widget, react embed Medium priority Created by Linear-GitHub Sync

Comments

@PeerRich
Copy link
Member

PeerRich commented Nov 8, 2024

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

image

image

CAL-4694

@PeerRich PeerRich added 🐛 bug Something isn't working embed area: embed, widget, react embed labels Nov 8, 2024
@PeerRich PeerRich changed the title embed issue with react 19 [CAL-4694] embed issue with react 19 Nov 8, 2024
@PeerRich PeerRich changed the title [CAL-4694] embed issue with react 19 [CAL-4694] embed issue with react 18.2 Nov 8, 2024
@PeerRich PeerRich added the Medium priority Created by Linear-GitHub Sync label Nov 8, 2024
@PeerRich
Copy link
Member Author

PeerRich commented Nov 8, 2024

/bounty 20

Copy link

algora-pbc bot commented Nov 8, 2024

💎 $20 bounty • Cal.com, Inc.

Steps to solve:

  1. Submit work: Create a pull request including /claim #17563 in the PR body to claim the bounty
  2. 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 bountyShare on socials

@algora-pbc algora-pbc bot added the 💎 Bounty A bounty on Algora.io label Nov 8, 2024
@itsalam
Copy link
Contributor

itsalam commented Nov 8, 2024

/attempt #17563

Algora profile Completed bounties Tech Active attempts Options
@itsalam 1 cal bounty
TypeScript, JavaScript,
Python
Cancel attempt

@itsalam
Copy link
Contributor

itsalam commented Nov 8, 2024

***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.

@AdityaGupta-cyber
Copy link

AdityaGupta-cyber commented Nov 9, 2024

/attempt #17563

@AdityaGupta-cyber
Copy link

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>
    );
}

@AdityaGupta-cyber
Copy link

Hey, @PeerRich , please let me know if the issue was not solved. I'll try to reimplement the solution.

Thanks!

@itsalam
Copy link
Contributor

itsalam commented Nov 9, 2024

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.

image

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.

@Harsh9485
Copy link

Harsh9485 commented Nov 9, 2024

/attempt #17563

@vishalpatil1899
Copy link

vishalpatil1899 commented Nov 10, 2024

/attempt #17563

1 similar comment
@vijay0984567
Copy link

vijay0984567 commented Nov 11, 2024

/attempt #17563

@itsalam
Copy link
Contributor

itsalam commented Nov 12, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💎 Bounty A bounty on Algora.io 🐛 bug Something isn't working embed area: embed, widget, react embed Medium priority Created by Linear-GitHub Sync
Projects
None yet
Development

No branches or pull requests

6 participants