https://descope.com logo
Join Slack
Powered by
While using the React SDK, I’m getting *`Error: Re...
# ask-a-descoper
c
While using the React SDK, I’m getting 
Error: ReactDOMServer does not yet support Suspense.
 on React 17/NextJS 12:
Copy code
"@descope/react-sdk": "^1.0.4",
"next": "^12.2.5",
"react": "^17.0.2",
Descope’s SDK shows that it should support React 16: https://github.com/descope/react-sdk/blob/282d535d6687430cf1bc5b0c34e2e2f8fc746236/package.json#L115 Is there anyway to disable Suspense for the 
<Descope/>
React component that I’m missing?
s
@few-holiday-24516 @great-diamond-35515 can you help here ?
g
Hey I will dig into it, FYI, The suspense usage is needed for SSR usage, so if you use nextJS, a dynamic import/suspension is required Quick question, do you plan to render Descope flow in the application?
c
I’m not familiar with Suspense, is there an example or a link to some documentation around the dynamic import/suspension that you mentioned? I’m not sure I understand your question, we’re planning to include the 
<Descope/>
React component as part of our NextJS application. We weren’t planning on preventing it from rendering on the server, so I believe the answer is “yes”, we would render the Descope Flow.
I forgot to mention the version of the SDK we’re using:
Copy code
"@descope/react-sdk": "^1.0.4",
g
yes this is what I meant to ask 🙂 the thing is that the Descope component should only render on the client side, and its code need to be suspended you can read about react suspense here, and also see the usage in react-sdk here but there is something we need to fix so it will be more streamlined, let me get back to you on that subject as soon as possible
👍 1
@cuddly-branch-99004 quick question - I can see that the Suspense is supported from React V16.6 (also validated that when I used our sample app with 17.0.2 - the Descope component seems to work), so I’m not sure that this is the reason Can you please share the code snippet that you are trying to do? I speculate that maybe you need wrap the Descope component as a dynamic import (see second screenshot). repeating the above that this is needed because the descope component uses browser API see example usage in our next js ample app
@cuddly-branch-99004 lmk if you can share the usage of Descope in next
c
ill have to get back to you sometime tomorrow EST
🙏 1
b
@cuddly-branch-99004 - let us know if you managed with this issue, or if you would like to hop on a short call to review together.
c
Sorry for the late follow-up. I believe I’m all set for now. This seems to work in TypeScript/NextJS:
Copy code
import dynamic from 'next/dynamic';
import type { Descope } from '@descope/react-sdk';

const DescopeWrapper = dynamic(() => import('@descope/react-sdk').then((module) => module.Descope), {
  ssr: false,
}) as typeof Descope;
Without the 
as
cast I get this type error:
Copy code
Types of parameters 'nextProps' and 'nextProps' are incompatible.
                    Type 'Readonly<{}>' is not assignable to type 'never'.ts(2345)
b
@cuddly-father-90160 please have a look.
g
I belive that this is needed because the 
dynamic
api, this is similar to how it is done in the sample-app example
Copy code
const DescopeWC = dynamic(
  async () => {
    const { Descope } = await import("@descope/react-sdk");
    return (props: React.ComponentProps<typeof Descope>) => (
      <Descope {...props} />
    );
  },
  {
    ssr: false,
  }
);
from my understanding - Descope roadmap should have a dedicated next-sdk which should encapsulate this part
2 Views
Open in Slack
PreviousNext
Powered by