CustomEvent is not defined

[ha-sante]

Checklist

• I could not find a solution in the existing issues or docs.
• I agree to follow this project's Code of Conduct.

Describe the bug

• error node_modules@teamhanko\hanko-frontend-sdk\dist\sdk.modern.js (1:4914) @ eval
• error ReferenceError: CustomEvent is not defined

Using the "@teamhanko/hanko-frontend-sdk": "^0.8.0", in "next": "13.4.7",

Reproducing the bug

I'd reckon how to reproduce this error is to

1. Init a nextjs app with versioning 13.4.7
2. Install the "@teamhanko/hanko-frontend-sdk": "^0.8.0",
3. Init the hanko client provided by the frontend sdk
4. Try to use the passcode feature
5. You will see this error on import and usage.
6. My current impression is that on import it's expecting some core browser features in turn resulting in the error (nextjs 13 has moved to server first which further contributes to this)

Logs

`- error node_modules\@teamhanko\hanko-frontend-sdk\dist\sdk.modern.js (1:4914) @ eval
- error ReferenceError: CustomEvent is not defined
    at __webpack_require__ (direcotorypathtothisfolder\.next\server\webpack-runtime.js:33:43)
    at eval (./src/lib/file.tsx:53:87)
    at (sc_client)/./src/lib/file.tsx (direcotorypathtothisfolder\.next\server\app\(dashboard)\path\page.js:16256:1)
    at __webpack_require__ (direcotorypathtothisfolder\.next\server\webpack-runtime.js:33:43)
    at eval (./src/app/error.tsx:10:68)
    at (sc_client)/./src/app/error.tsx (direcotorypathtothisfolder\.next\server\app\(dashboard)\path\page.js:16201:1)
    at __webpack_require__ (direcotorypathtothisfolder\.next\server\webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)`

Configuration

No response

Hanko Version

0.8.0

OS Hanko Backend

None

OS Version Hanko Backend

No response

OS

None

OS Version

No response

Browser Version

Chrome

Environment

None

Additional Context

No response

[lfleischmann]

Hi @ha-sante,

My current impression is that on import it's expecting some core browser features in turn resulting in the error (nextjs 13 has moved to server first which further contributes to this)

Yes that is correct. The SDK includes a class that extends the CustomEvent API.

Does the error stop your app from working entirely or is it "just" an SSR error?

If it is the former, you could try a dynamic import similar to what is shown in the docs for hanko-elements (see lines 12-18 for the App directory code example) - but import the hanko-frontend-sdk instead:

  const [hanko, setHanko] = useState<Hanko>();

  useEffect(() => {
    import("@teamhanko/hanko-frontend-sdk").then(({ Hanko }) =>
      setHanko(new Hanko(hankoApi))
    );
  }, []);

Alternatively, you could also try using next/dynamic.

[ha-sante]

Will look into this @lfleischmann and report back

[ELGBJQ2Y3126122]

Your most welcome

[amjed-ali-k]

adding force-dynamic Route Segment Config to the page fixes this issue for me.

// layout.tsx | page.tsx | route.ts
export const dynamic = "force-dynamic";

[sojinsamuel]

adding force-dynamic Route Segment Config to the page fixes this issue for me.

// layout.tsx | page.tsx | route.ts
export const dynamic = "force-dynamic";

I tried to add the route config in the root layout, but didnt work. The error in the console is annoying

[Ashutosh-Bhadauriya]

Hey @sojinsamuel this issue has been fixed, we need to dynamic import the component where we use it. We'll be updating the docs soon

import dynamic from 'next/dynamic';
const HankoAuth = dynamic(() => import('@/components/HankoAuth'), { ssr: false })

export default function LoginPage() {
 return (
   <HankoAuth />
 );
}

[Ashutosh-Bhadauriya]

Closing this, as the issue has been addressed.