I am facing a weird behaviour of Nextjs. It seems like the whole App rerenders and redirects when I am starting a third party popup. I also reached already out to them, but they say they think it might be related to Nextjs or my implementation. I created a plain empty Nextjs App and tried it out there, and it works to my surprise flawless and the popup shows up.
I added a video of the behavior here: https://youtu.be/AExbjqi9TBs
Did anyone of you face a similar issue in the past? I am a bit clueless, it seems like the App is somehow forced to rerender and also redirects me to the page. Could it be related to my authentication or context?
My code for starting the third party popup is here:
const OnboardingStart: React.FC & AuthProps = () => {
const [linkToken, setLinkToken] = useState("");
const { workspace } = useWorkspace();
const onSuccess = useCallback((public_token) => {
// Send public_token to server (Step 3)
}, []);
const { open, isReady } = useMergeLink({
linkToken: linkToken,
onSuccess,
});
const startNewConnection = useCallback(async () => {
const response = await api("/api/integrations/merge", {
body: { organizationName: workspace.name },
method: "POST",
});
setLinkToken(response.data.linkToken);
}, [workspace.name]);
useEffect(() => {
startNewConnection();
}, [startNewConnection]);
return (
<DashboardLayout>
<Meta title="Lucid - Onboarding" />
<ContentTitle
title="Onboarding"
subtitle="..."
/>
<ContentDivider />
<ContentContainer>
<Card>
<form>
<CardBody
title="Connect your HRIS software"
subtitle="..."
></CardBody>
<CardFooter>
<small>Press connect to start connecting your HRIS.</small>
<PrimaryButton
title="Connect"
action={() => open()}
disabled={!isReady}
/>
</CardFooter>
</form>
</Card>
</ContentContainer>
</DashboardLayout>
);
};
OnboardingStart.requireAuth = true;
export default OnboardingStart;
Sometimes it also drops me this error in console but not every time:
[Report Only] Refused to load the script 'https://cdn.merge.dev/internal_root.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.