NextJS build failed because of `ReferenceError: CustomEvent is not defined`

[shricodev]

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

This is the complete error trace - https://gist.github.com/shricodev/6c9078d781ba5c4d62d420d16765c025

Steps already taken

After going through the issues section in this repo, I found a closed issue that addressed this error. I tried dynamic importing the modules as shown here. This did not fix it either, or perhaps I missed something.

My repo state in which the error is observed - https://github.com/shricodev/pdfwhisper-openai/tree/50705dd06f9c78327f1a5241c91845d0daad4c5f

However, I found a fix to use

export const dynamic = "force-dynamic";

in layout.tsx to fix the error that was not letting me build the application. But, on running

pnpm run start

The error is again seen in the console:

❯ pnpm run start

> docwhisper-openai@0.1.0 start C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai
> next start

  ▲ Next.js 13.5.4
  - Local:        http://localhost:3000

 ✓ Ready in 163ms
ReferenceError: CustomEvent is not defined
    at C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\chunks\366.js:1:56025
    at 274 (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\chunks\366.js:1:122010)
    at __webpack_require__ (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\webpack-runtime.js:1:146)
    at 3071 (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\chunks\797.js:1:1460)
    at __webpack_require__ (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\webpack-runtime.js:1:146)
    at 5985 (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\chunks\797.js:1:1220)
    at __webpack_require__ (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\webpack-runtime.js:1:146)
    at I (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\node_modules\.pnpm\next@13.5.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:43:5587)
    at C (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\node_modules\.pnpm\next@13.5.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:43:4266)
    at rp (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\node_modules\.pnpm\next@13.5.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:25013)
ReferenceError: CustomEvent is not defined
    at C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\chunks\366.js:1:56025
    at 274 (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\chunks\366.js:1:122010)
    at __webpack_require__ (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\webpack-runtime.js:1:146)
    at 3071 (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\chunks\797.js:1:1460)
    at __webpack_require__ (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\webpack-runtime.js:1:146)
    at 5985 (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\chunks\797.js:1:1220)
    at __webpack_require__ (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\.next\server\webpack-runtime.js:1:146)
    at I (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\node_modules\.pnpm\next@13.5.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:43:5587)
    at C (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\node_modules\.pnpm\next@13.5.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:43:4266)
    at rp (C:\Users\reali\OneDrive\Desktop\codes\docwhisper-openai\node_modules\.pnpm\next@13.5.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:25013)

Reproducing the bug

1. Build the application provided - pnpm run build
2. Run the application - pnpm run start

Logs

No response

Configuration

No response

Hanko Version

0.8.4

OS Hanko Backend

Windows

OS Version Hanko Backend

No response

OS

None

OS Version

No response

Browser Version

No response

Environment

None

Additional Context

No response

[Ashutosh-Bhadauriya]

Hey @shricodev dynamic import importing the component when using it, fixes this issue. Have you tried that

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

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

You can also find it in the docs, it has been updated
https://docs.hanko.io/quickstarts/fullstack/next

[shricodev]

@Ashutosh-Bhadauriya I have already tried dynamically importing the <Hanko-Auth> component, but it did not work either. I have mentioned it here.

After going through the issues section in this repo, I found a closed issue that addressed this error. I tried dynamic importing the modules as shown #1020 (comment). This did not fix it either, or perhaps I missed something.

This is the code that renders <HankoAuth /> and <HankoProfile />

import dynamic from "next/dynamic";
// This is imported dynamically to get rid of a hanko bug.
// ReferenceError: CustomEvent is not defined
const HankoAuth = dynamic(() => import("@/components/HankoAuth/HankoAuth"), {
  ssr: false,
});

export default function LoginPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <HankoAuth />
    </div>
  );
}

import dynamic from "next/dynamic";
import type { ComponentType } from "react";

// These are imported dynamically to get rid of a hanko bug.
// ReferenceError: CustomEvent is not defined
const HankoProfile = dynamic(
  () => import("@/components/HankoProfile/HankoProfile"),
  {
    ssr: false,
  },
);
import LogoutButton from "@/components/HankoLogout/LogoutBotton";

type Props = {};

const Page: ComponentType<Props> = (props) => {
  return (
    <div className="mx-auto flex w-fit flex-col justify-center space-y-6 px-6">
      <HankoProfile />
      <LogoutButton />
    </div>
  );
};

export default Page;

PS: I have also tried dynamic importing the <HankoLogout /> component. It didn't work.
Could you please try checking in the existing codebase that might be throwing this error even when everything is done as mentioned? I may have missed something\

https://github.com/shricodev/pdfwhisper-openai

[Ashutosh-Bhadauriya]

Okay taking a look

[joshatbond]

This isn't a bug (at least anymore). The docs as they are now resolve what caused this problem. Wrapping the hanko-auth component in a client component is the correct implementation.

The force-dynamic inclusion is not a real solution as that is only used for keeping routes not static in next.js.

[willyfromtheblock]

I have mitigated a the
ReferenceError: CustomEvent is not defined
issue by upgrading the required node engine from 18 to 20 (no dynamic exports necessary)

I have setup hanko component like required in the docs with "use client" and still got this issue on node 18.