Hi fellas,

I'm facing a blank page issue with my Next.js app using the app router. Here are the details:

Page Component:

src/app/shift-monitoring/page.tsx

import { NotFoundComponent } from "@/components/NotFoundComponent";
import FramerMonitringWrapper from "@/components/pages/FramerMonitoring";
import React from "react";
import { checkJid } from "./checkJid";

type SearchParams = { jid: string };

const FrameMonitoringPage = async ({ searchParams }: { searchParams: SearchParams }) => {
  const { jid } = searchParams;
  const checkJIDStatus = await checkJid(jid);

  if (!jid || !checkJIDStatus.status) return <NotFoundComponent />;
  return <FramerMonitringWrapper jid={jid} />;
};

export default FrameMonitoringPage;

checkJID

Server Action Function:

"use server";
import { AuthError } from "next-auth";

export async function checkJid(jid: string): Promise<{ status: boolean }> {
  try {
    return { status: true };
  } catch (error) {
    console.error("SignIn Error", JSON.stringify(error));
    return { status: false };
  }
}

FramerMonitringWrapper

Component:

"use client";
import React from "react";
import MonitoringShiftPage from "@/components/pages/Monitoring/MonitoringShift";

const FramerMonitringWrapper = ({ jid }: { jid: string }) => (
  <MonitoringShiftPage jid={jid} />
);

export default FramerMonitringWrapper;

On inspect source there is this error,

Error: Could not load content for webpack://_N_E/src/client/app-index.tsx?b6bc (Unsupported URL scheme; HTTP error: status code 404)

Questions:

What's causing the blank page rendering?

How can I fix the Webpack unsupported URL scheme error?

Any help is appreciated!

Thanks!