Nextjs build is failing

[Sine99]

Summary

Just installed the latest version of nextjs 14.1.0 as mentioned in the documentation.
Nodejs version - 18.19.1

"next": "^14.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"typescript": "5.3.3"

On executing the command npm run build, i get the following error -
`▲ Next.js 14.1.0

     Creating an optimized production build ...
   ✓ Compiled successfully
     Linting and checking validity of types  .Failed to compile.
  
  .next/types/app/page.ts:28:13
  Type error: Type 'OmitWithTag<{ children: ReactNode; }, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
    Property 'children' is incompatible with index signature.
      Type 'ReactNode' is not assignable to type 'never'.
        Type 'string' is not assignable to type 'never'.
  
    26 |
    27 | // Check the prop type of the entry function
  > 28 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
       |             ^
    29 |
    30 | // Check the arguments and return type of the generateMetadata function
    31 | if ('generateMetadata' in entry) {`

Additional information

No response

Example

No response

[icyJoseph]

Hi,

Could you share more about the page you are trying to build? The build step has a bit of a strict rule regarding the type signature of the exported default page. I need to see what you have to be able to give you a code fix.

[antonio-abrantes]

export default async function DemoPage({ params }: { params: Promise<{ id: string }> }) {

You need to wrap your id object with Promise. @antonio-abrantes

So simple! It worked! Thank you so much! ;)

[icyJoseph]

@om-baji try my previous comment, you have an invalid export on your edit route.

Page files can only export certain functions, and constants, plus a React component as default export.

[om-baji]

Man this was to stupid of me, thank you

[icyJoseph]

It's cool, it is it not 100% intuitive, and many people from react-router, and Pages Router, like to re-export and reuse stuff in other parts of the app...

In App Router, a page file is the semantic entry point for a page request, which means that only data and functions that contribute to serving content are allowed to be exported.

[JardelLacerda1]

Obrigado pela sua resposta. Consegui resolver o problema alterando o nome do arquivo do componente, não percebi que havia restrições diferentes para arquivos page.tsx.

Eu também consegui fazendo esse procedimento, porém após alterar o nome do arquivo o next não reconhece o arquivo como page mais

[808vita]

If its urgent to build and you want to ignore the errors for now, then please follow the things stated in the docs link :
ignoreBuildErrors docs link

(pasting snippet for convenience)
Open next.config.jsand enable the ignoreBuildErrors option in the typescript config:

next.config.js

module.exports = {
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
}

[islam-belamri]

@icyJoseph hey I'm facing this error when i try to run npm run build:
.next/types/app/[locale]/categories/page.ts:28:13
Type error: Type 'OmitWithTag<CategoriesProps, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
Property 'searchTerm' is incompatible with index signature.
Type 'string' is not assignable to type 'never'.

26 |
27 | // Check the prop type of the entry function

28 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
| ^
29 |
30 | // Check the arguments and return type of the generateMetadata function
31 | if ('generateMetadata' in entry) {

[icyJoseph]

Easy... your Categories component is itself a page, app/[locale]/categories/page.tsx, and you import that to app/[locale]/categories/[searchTeam]/page.tsx

So the problem is not really, on your screenshot, but in app/[locale]/categories/page.tsx.

I'd recommend creating app/[locale]/categories/Categories.tsx, and put the Categories component there, and then adapt:

• app/[locale]/categories/page.tsx,

You don't need to do anything with, app/[locale]/categories/page.tsx, other than updating the import.

That is to say, that your app/[locale]/categories/page.tsx file is a reachable page, maybe you don't want this at all (?).

[rainnfx]

@icyJoseph Hey! Mind helping me out too? I'm a new to all of this.

.next/types/app/(protected)/settings/page.ts:28:13
Type error: Type 'OmitWithTag<{ onSuccess?: (() => void) | undefined; }, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'onSuccess' is incompatible with index signature.
    Type '() => void' is not assignable to type 'never'.

  26 |
  27 | // Check the prop type of the entry function
> 28 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
     |             ^
  29 |
  30 | // Check the arguments and return type of the generateMetadata function
  31 | if ('generateMetadata' in entry) {

here's the layout of the specific area:

/settings/page.tsx

"use client";

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { LuCreditCard, LuLock, LuTreePine, LuUser } from "react-icons/lu";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { SettingsSchema } from "@/schemas";
import * as z from "zod";
import { useState, useTransition } from "react";
import { useSession } from "next-auth/react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { settings } from "@/actions/settings";
import { FormError } from "@/components/form-error";
import { FormSuccess } from "@/components/form-success";
import { useRouter } from "next/navigation";

export default function SettingsPage({ onSuccess = () => {} }) {
  const [error, setError] = useState<string | undefined>("");
  const [success, setSuccess] = useState<string | undefined>("");
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const { data: session } = useSession();
  const userId = session?.user?.id;

  const form = useForm<z.infer<typeof SettingsSchema>>({
    resolver: zodResolver(SettingsSchema),
  });

  const onSubmit = async (values: z.infer<typeof SettingsSchema>) => {
    // Reset the error and success states before submission
    setError("");
    setSuccess("");

    try {
      if (!userId) {
        throw new Error("User ID is missing");
      }

      const data = await settings(values, userId);
      console.log("Data received from settings action:", data);

      if (data.error) {
        console.log("Data error:", data.error);
        setError(data.error);
      } else if (data.success) {
        console.log("Data success:", data.success);
        setSuccess(data.success);
        onSuccess();
      } else {
        console.log("Unexpected data format:", data);
        setError("An unexpected response was received.");
      }
    } catch (error) {
      console.error("Error submitting form:", error);
      if (error instanceof Error) {
        setError(error.message);
      } else {
        setError("An error occurred. Please try again.");
      }
    }

    // Log current states for debugging
    console.log("Error state after submit:", error);
    console.log("Success state after submit:", success);
  };

  return (
    <div className="flex w-full bg-muted/40 h-screen">
      <aside className="hidden w-64 flex-col border-r bg-background p-6 md:flex">
        <div className="mb-8 flex items-center gap-2">
          <button className="h-10 w-10 rounded-full">
            <Avatar className="h-10 w-10">
              <AvatarImage src="/placeholder-user.jpg" />
              <AvatarFallback>JP</AvatarFallback>
            </Avatar>
          </button>
          <div className="text-lg font-semibold">John Doe</div>
        </div>
        <nav className="space-y-1">
          <Link
            href="#"
            className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
            prefetch={false}
          >
            <LuUser className="h-5 w-5" />
            Profile
          </Link>
          <Link
            href="#"
            className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
            prefetch={false}
          >
            <LuTreePine className="h-5 w-5" />
            Projects
          </Link>
          <Link
            href="#"
            className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
            prefetch={false}
          >
            <LuCreditCard className="h-5 w-5" />
            Billing
          </Link>
          <Link
            href="#"
            className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
            prefetch={false}
          >
            <LuLock className="h-5 w-5" />
            Security
          </Link>
        </nav>
      </aside>
      <main className="flex-1 p-6 md:p-10">
        <div className="mx-auto max-w-4xl">
          <div className="mb-8 flex items-center justify-between">
            <h1 className="text-3xl font-bold">Profile</h1>
          </div>
          <div className="grid gap-8">
            <Card>
              <CardHeader>
                <CardTitle>Personal Information</CardTitle>
                <CardDescription>
                  Update your personal information.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <Form {...form}>
                  <form
                    onSubmit={form.handleSubmit(onSubmit)}
                    className="space-y-4"
                  >
                    <div className="grid grid-cols-2 gap-6">
                      <FormField
                        control={form.control}
                        name="name"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>Name</FormLabel>
                            <FormControl>
                              <Input {...field} disabled={isPending} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name="username"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>Username</FormLabel>
                            <FormControl>
                              <Input {...field} disabled={isPending} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </div>
                    {error && <FormError message={error} />}
                    {success && <FormSuccess message={success} />}
                    <Button
                      disabled={isPending}
                      type="submit"
                      variant="outline"
                    >
                      Save Changes
                    </Button>
                  </form>
                </Form>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  );
}

/settings/projects/[projectname]

import { db } from "@/lib/db";
import { notFound } from "next/navigation";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { currentUser } from "@/lib/auth";
import { cache } from "react";
import Link from "next/link";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import {
  LuCreditCard,
  LuLock,
  LuMessageCircle,
  LuSettings,
  LuTreePine,
} from "react-icons/lu";
import { ProjectOverviewSettingsSchema } from "@/schemas";
import * as z from "zod";
import { useSession } from "next-auth/react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { settings } from "@/actions/settings";
import { FormError } from "@/components/form-error";
import { FormSuccess } from "@/components/form-success";
import { Textarea } from "@/components/ui/textarea";
import { useDropzone } from "react-dropzone";
import { Upload, Trash } from "lucide-react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import ProjectForm from "./_components/overviewform";

interface PageProps {
  params: { projectname: string };
  searchParams: { [key: string]: string | string[] | undefined };
}

// Function to fetch project by projectname
const getProject = cache(async (projectname: string) => {
  const normalizedProjectName = projectname.replace(/-/g, " "); // Convert dashes to spaces
  return db.project.findUnique({
    where: { projectName: normalizedProjectName },
    select: {
      id: true,
      projectName: true,
      longDescription: true,
      shortDescription: true,
      domain: true,
      license: true,
      ownerId: true,
    },
  });
});

export async function generateMetadata({ params: { projectname } }: PageProps) {
  const project = await getProject(projectname);

  return {
    title: project?.projectName || `Project ${projectname}`,
  };
}

export default async function Page({ params: { projectname } }: PageProps) {
  // Artificial delay to showcase static caching
  await new Promise((resolve) => setTimeout(resolve, 1500));

  const project = await getProject(projectname);

  if (!project) notFound();

  // Check if the user is the owner
  const sessionUser = await currentUser();

  if (!sessionUser || project.ownerId !== sessionUser.id) {
    notFound();
  }

  return (
    <div className="flex w-full bg-muted/40 min-h-screen">
      <aside className="hidden w-64 flex-col border-r bg-background p-6 md:flex">
        <div className="mb-8 flex items-center gap-2">
          <button className="h-10 w-10 rounded-full">
            <Avatar className="h-10 w-10">
              <AvatarImage src="/placeholder-user.jpg" />
              <AvatarFallback>JP</AvatarFallback>
            </Avatar>
          </button>
          <div className="text-lg font-semibold">hi</div>
        </div>
        <nav className="space-y-1">
          <Link
            href="#"
            className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
            prefetch={false}
          >
            <LuSettings className="h-5 w-5" />
            Overview
          </Link>
          <Link
            href="#"
            className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
            prefetch={false}
          >
            <LuTreePine className="h-5 w-5" />
            Campaigns
          </Link>
          <Link
            href="#"
            className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
            prefetch={false}
          >
            <LuMessageCircle className="h-5 w-5" />
            Posts
          </Link>
          <Link
            href="#"
            className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
            prefetch={false}
          >
            <LuCreditCard className="h-5 w-5" />
            Billing
          </Link>
          <Link
            href="#"
            className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
            prefetch={false}
          >
            <LuLock className="h-5 w-5" />
            Security
          </Link>
        </nav>
      </aside>
      <main className="flex-grow p-6 md:p-10">
        <div className="mx-auto max-w-4xl">
          <div className="mb-8 flex items-center justify-between">
            <h1 className="text-3xl font-bold">Overview</h1>
          </div>
          <div className="grid gap-8"></div>
        </div>
      </main>
    </div>
  );
}

not sure which file is the problem so i gave both
Thanks in advance! :D
Also, let me know if I need to ask anything else! I'm new to asking for help in this format (ChatGPT usually solves it)!

[icyJoseph]

Do you want, app/settings to be a reachable page? Like users can load that? How would they do that, if you require that component to take in an onSuccess callback. Files that are page.tsx, ought to have a proper type signature.

The problem is /settings/page.tsx, you need to refactor the type signature of that component.

[rainnfx]

Hey @icyJoseph ! Yeah it'll be a reachable page. /settings is a page for users to change their account settings. Whilst /settings/[projectname] and everything else under that is to change the settings of projects. Alright, uh sorry if this is annoying to ask but how do I refactor it? (code already provided)

Thanks in advance. Also sorry if this is annoying. 🙏

[icyJoseph]

Move the settings/page.tsx into settings/form.tsx, and then redo settings/page.tsx as :

// pseudo-code
// other imports
import SettingsForm from './form';

export default function SettingsPage() {
  // other stuff you might need

 return <SettingsForm />
}

[rainnfx]

You're a genuis.. Thank you so much. :^)

[varadareddyj]

Hey @icyJoseph ! i too find this issue in my application while building. please suggest

Linting and checking validity of types ...Failed to compile.

.next/types/app/component/MenuItem/page.ts:28:13
Type error: Type 'OmitWithTag<{ menuItem: MenuItemProps; }, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
Property 'menuItem' is incompatible with index signature.
Type 'MenuItemProps' is not assignable to type 'never'.

[icyJoseph]

Your MenuItem component is a page.tsx file, do you want that to be the case? It means it can be reached from the browser.

It fails because pages have a specific signature, to be used by the framework. Where the path params and searchParams are included. Your signature doesn't match that.

Rename it to MenuItem/component.tsx and then it'll build, but there won't be any Menu Item page.

If you do want that page, create that file again, and there, render your MenuItem component.

[varadareddyj]

Great! Thank you so much, it worked!

[varadareddyj]

// Example component with correct typing
"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { MenuItemContainer } from "./styles";
import MenuItemsList from "../MenuItemsList/page";
import ExpandIcon from "../ExpandIcon";
import { useState, useEffect } from "react";
import {
Dashboard,
ShoppingCart,
People,
AttachMoney,
AddShoppingCart,
Done,
Business,
HomeWork,
Person,
} from "@styled-icons/material";

interface MenuItemProps {
mid: number;
name: string;
icon: string;
depth: number;
subItem: number;
url: string;
}

interface MyComponentProps {
menuItem?: MenuItemProps;
}

//type OmitWithTag<T, K, Tag extends string = 'default'> = Omit<T, K & keyof T> & { [key in Tag]: never };

//const MenuItem: React.FC = ({ menuItem }) => {

//type OmitWithTag<T, K, Tag extends string = 'default'> = Omit<T, K & keyof T> & { [key in Tag]: never };

const MenuItem: React.FC<{ menuItem: MenuItemProps; }> = ({ menuItem }) => {
// rest of the code remains the same
const { mid, name, icon, depth, subItem, url } = menuItem;

const [menuItems, setMenuItems] = useState<MenuItemProps[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<Error | null>(null);

useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
try {
const response = await fetch(/api/menu-items/${mid});
const data: MenuItemProps[] = await response.json();
setMenuItems(data);
} catch (err: any) {
setError(err);
} finally {
setIsLoading(false);
}
};

fetchData();

}, [mid]);

const [isExpanded, toggleExpanded] = useState(false);
const pathname = usePathname();
const selected = pathname === url;
const isNested = subItem > 0;

const onClick = () => {
toggleExpanded((prev) => !prev);
};

return (
<>
<MenuItemContainer className={selected ? "selected" : ""} Depth={depth} isOpened={true}>

{icon && (
<>
{icon === "Dashboard" && }
{icon === "ShoppingCart" && }
{icon === "People" && }
{icon === "AttachMoney" && }
{icon === "AddShoppingCart" && }
{icon === "Done" && }
{icon === "Business" && }
{icon === "HomeWork" && }
{icon === "Person" && }
</>
)}
{name}

{isNested ? : null}

{isExpanded && isNested ? : null}
</>
);
};

export default MenuItem;

[varadareddyj]

Hey @icyJoseph i get below error when i start npm start after the build

i also added -> ...(process.env.NODE_ENV === "development" ? { trustHost: true } : {}), in auth

[auth][error] UntrustedHost: Host must be trusted. URL was: http://localhost:3000/api/auth/session. Read more at https://errors.authjs.dev#untrustedhost
at D:\Development\NEXTJS\NEXTSQL\rlogin.next\server\src\middleware.js:389:47158
at ai (D:\Development\NEXTJS\NEXTSQL\rlogin.next\server\src\middleware.js:389:49866)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[icyJoseph]

🤷‍♂️ ¯_(ツ)_/¯ ~ at least I can tell you having such logic for dev and production is gonna make things slightly more annoying than they need to be. Maybe go to auth.js and ask over there.

[varadareddyj]

// auth.config.ts
import { Session, User } from "next-auth";
import { JWT } from "next-auth/jwt";

type Callbacks = {
session: (params: { session: Session; token: JWT; user: User }) => Promise | Session;
};

type NextAuthOptions = {
session: {
strategy: "jwt" | "database";
};
providers: [],
callbacks: Callbacks;
trustedHosts: string[];
// Add other configuration options as needed
};

const authConfig: NextAuthOptions = {
session: {
strategy: "jwt",
},
providers: [],

callbacks: {
async session({ session, token, user }) {
return session;
},
},
// Other configuration options if needed
trustedHosts: ['http://localhost:3000'],
};

export default authConfig;

[Douk1NG]

In my case I had this app/[locale]/page.tsx

interface PropTypes {
  children: React.ReactNode
}

export default function Page(props: PropTypes) {
  return (
    <>{props.children}</>
  )
}

I changed it to

export default function RootPage() {
    return <></>
}

I think that happens because children property is received by the layout and not the page, but I'm not sure

[princekumar205086]

### my problem was this!

PS C:\Users\Prince Raj\Desktop\nextjs project\app-dashboard> yarn run build
yarn run v1.22.22
warning ......\package.json: No license field
$ next build
▲ Next.js 14.2.5

• Environments: .env

Creating an optimized production build ...
✓ Compiled successfully
Linting and checking validity of types ...Failed to compile.

.next/types/app/admin/sidebar/page.ts:28:13
Type error: Type 'OmitWithTag<Props, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
Property 'children' is incompatible with index signature.
Type 'string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor> | Iterable | ReactPortal | Promise<...> | null' is not assignable to type 'never'.
Type 'null' is not assignable to type 'never'.

26 |
27 | // Check the prop type of the entry function

28 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
| ^
29 |
30 | // Check the arguments and return type of the generateMetadata function
31 | if ('generateMetadata' in entry) {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS C:\Users\Prince Raj\Desktop\nextjs project\app-dashboard>

**

my previous code was:

**

// sidebar for admin
"use client";
import React, { ReactNode, useEffect } from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";
import Divider from "@mui/material/Divider";
import Drawer from "@mui/material/Drawer";
import IconButton from "@mui/material/IconButton";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import MailIcon from "@mui/icons-material/Mail";
import MenuIcon from "@mui/icons-material/Menu";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import { Collapse } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import { useRouter, usePathname } from "next/navigation";
import Link from "next/link";
import { toast } from "react-toastify";

// Adjusted type definition
interface Props {
children?: ReactNode;
}

const drawerWidth = 240;

export default function Layouts(props: Props) {
const { children } = props;
const [mobileOpen, setMobileOpen] = React.useState(false);
const [isClosing, setIsClosing] = React.useState(false);
const [isCollapse, setIsCollapse] = React.useState(false);

const handleDrawerClose = () => {
setIsClosing(true);
setMobileOpen(false);
};

const handleCollapse = (event: React.MouseEvent) => {
event.stopPropagation();
setIsCollapse((prev) => !prev);
};

const handleDrawerTransitionEnd = () => {
setIsClosing(false);
};

const handleDrawerToggle = () => {
if (!isClosing) {
setMobileOpen(!mobileOpen);
}
};

const router = useRouter();
const pathname = usePathname();
console.log("pathname " + pathname);

useEffect(() => {
if (
pathname.startsWith("/support") ||
pathname.startsWith("/change-password") ||
pathname.startsWith("/contact")
) {
setIsCollapse(true);
}
}, [pathname]);

const handleLogout = () => {
console.log("Logout clicked");

// Remove the token from localStorage
localStorage.removeItem("token");

// Optionally, show a logout successful message toast message
toast.success("Successfully logged out");

// Redirect to the login page
router.push("/login");

};

const drawer = (

APP-DASHBOARD




{["Dashboard", "Profile", "AstrologyService", "PujaService"].map(
(text, index) => (
<Link href={/admin/${text.toLowerCase()}} key={text}>
<ListItem
disablePadding
className={
pathname.startsWith("/" + text.toLowerCase())
? "text-sky-600 bg-slate-100"
: "text-slate-700"
}
>

<ListItemIcon
className={
pathname.startsWith("/" + text.toLowerCase())
? "text-sky-600 bg-slate-100"
: "text-slate-700"
}
>
{index % 2 === 0 ? : }





)
)}

<ListItem
disablePadding
onClick={handleCollapse}
className={
pathname.startsWith("/setting")
? "text-sky-600 bg-slate-100"
: "text-slate-700"
}
>

<ListItemIcon
className={
pathname.startsWith("/setting")
? "text-sky-600 bg-slate-100"
: "text-slate-700"
}
>



{isCollapse ? : }





{["Support", "Change-Password", "Contact"].map((text, index) => (
<Link href={/admin/${text.toLowerCase()}} key={text}>
<ListItem
disablePadding
className={
pathname.startsWith("/" + text.toLowerCase())
? "text-sky-600 bg-slate-100"
: "text-slate-700"
}
>

<ListItemIcon
className={
pathname.startsWith("/" + text.toLowerCase())
? "text-sky-600 bg-slate-100"
: "text-slate-700"
}
>
{index % 2 === 0 ? : }





))}

);

const container = undefined;

return (
<Box sx={{ display: "flex" }}>

<AppBar
position="fixed"
sx={{
width: { sm: calc(100% - ${drawerWidth}px) },
ml: { sm: ${drawerWidth}px },
bgcolor: "#ffffff",
color: "black",
boxShadow: "none",
borderBottom: "solid black 1px",
}}
>

<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: "none" } }}
>



{pathname.replace(/^//, "").toUpperCase()}

<Box sx={{ flexGrow: 1 }} />
<Button
color="inherit"
onClick={handleLogout}
sx={{ textTransform: "none" }}
>
Logout



<Box
component="nav"
sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
aria-label="dashboard"
>
<Drawer
container={container}
variant="temporary"
open={mobileOpen}
onTransitionEnd={handleDrawerTransitionEnd}
onClose={handleDrawerClose}
ModalProps={{
keepMounted: true,
}}
sx={{
display: { xs: "block", sm: "none" },
"& .MuiDrawer-paper": {
boxSizing: "border-box",
width: drawerWidth,
},
}}
>
{drawer}

<Drawer
variant="permanent"
sx={{
display: { xs: "none", sm: "block" },
"& .MuiDrawer-paper": {
boxSizing: "border-box",
width: drawerWidth,
},
}}
open
>
{drawer}


<Box
component="main"
sx={{
flexGrow: 1,
p: 3,
width: { sm: calc(100% - ${drawerWidth}px) },
}}
>

{children}


);
}

### my solution code:

// sidebar for admin
"use client";
import React, { ReactNode, useEffect } from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";
import Divider from "@mui/material/Divider";
import Drawer from "@mui/material/Drawer";
import IconButton from "@mui/material/IconButton";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import MailIcon from "@mui/icons-material/Mail";
import MenuIcon from "@mui/icons-material/Menu";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import { Collapse } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import { useRouter, usePathname } from "next/navigation";
import Link from "next/link";
import { toast } from "react-toastify";

// Adjusted type definition
// interface Props {
// children?: ReactNode;
// }

const drawerWidth = 240;

export default function Layouts(props: any) {
const { children } = props;
const [mobileOpen, setMobileOpen] = React.useState(false);
const [isClosing, setIsClosing] = React.useState(false);
const [isCollapse, setIsCollapse] = React.useState(false);

const handleDrawerClose = () => {
setIsClosing(true);
setMobileOpen(false);
};

const handleCollapse = (event: React.MouseEvent) => {
event.stopPropagation();
setIsCollapse((prev) => !prev);
};

const handleDrawerTransitionEnd = () => {
setIsClosing(false);
};

const handleDrawerToggle = () => {
if (!isClosing) {
setMobileOpen(!mobileOpen);
}
};

const router = useRouter();
const pathname = usePathname();
console.log("pathname " + pathname);

useEffect(() => {
if (
pathname.startsWith("/support") ||
pathname.startsWith("/change-password") ||
pathname.startsWith("/contact")
) {
setIsCollapse(true);
}
}, [pathname]);

const handleLogout = () => {
console.log("Logout clicked");

// Remove the token from localStorage
localStorage.removeItem("token");

// Optionally, show a logout successful message toast message
toast.success("Successfully logged out");

// Redirect to the login page
router.push("/login");

};

const drawer = (

APP-DASHBOARD




{["Dashboard", "Profile", "AstrologyService", "PujaService"].map(
(text, index) => (
<Link href={/admin/${text.toLowerCase()}} key={text}>
<ListItem
disablePadding
className={
pathname.startsWith("/" + text.toLowerCase())
? "text-sky-600 bg-slate-100"
: "text-slate-700"
}
>

<ListItemIcon
className={
pathname.startsWith("/" + text.toLowerCase())
? "text-sky-600 bg-slate-100"
: "text-slate-700"
}
>
{index % 2 === 0 ? : }





)
)}

<ListItem
disablePadding
onClick={handleCollapse}
className={
pathname.startsWith("/setting")
? "text-sky-600 bg-slate-100"
: "text-slate-700"
}
>

<ListItemIcon
className={
pathname.startsWith("/setting")
? "text-sky-600 bg-slate-100"
: "text-slate-700"
}
>



{isCollapse ? : }





{["Support", "Change-Password", "Contact"].map((text, index) => (
<Link href={/admin/${text.toLowerCase()}} key={text}>
<ListItem
disablePadding
className={
pathname.startsWith("/" + text.toLowerCase())
? "text-sky-600 bg-slate-100"
: "text-slate-700"
}
>

<ListItemIcon
className={
pathname.startsWith("/" + text.toLowerCase())
? "text-sky-600 bg-slate-100"
: "text-slate-700"
}
>
{index % 2 === 0 ? : }





))}

);

const container = undefined;

return (
<Box sx={{ display: "flex" }}>

<AppBar
position="fixed"
sx={{
width: { sm: calc(100% - ${drawerWidth}px) },
ml: { sm: ${drawerWidth}px },
bgcolor: "#ffffff",
color: "black",
boxShadow: "none",
borderBottom: "solid black 1px",
}}
>

<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: "none" } }}
>



{pathname.replace(/^//, "").toUpperCase()}

<Box sx={{ flexGrow: 1 }} />
<Button
color="inherit"
onClick={handleLogout}
sx={{ textTransform: "none" }}
>
Logout



<Box
component="nav"
sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
aria-label="dashboard"
>
<Drawer
container={container}
variant="temporary"
open={mobileOpen}
onTransitionEnd={handleDrawerTransitionEnd}
onClose={handleDrawerClose}
ModalProps={{
keepMounted: true,
}}
sx={{
display: { xs: "block", sm: "none" },
"& .MuiDrawer-paper": {
boxSizing: "border-box",
width: drawerWidth,
},
}}
>
{drawer}

<Drawer
variant="permanent"
sx={{
display: { xs: "none", sm: "block" },
"& .MuiDrawer-paper": {
boxSizing: "border-box",
width: drawerWidth,
},
}}
open
>
{drawer}


<Box
component="main"
sx={{
flexGrow: 1,
p: 3,
width: { sm: calc(100% - ${drawerWidth}px) },
}}
>

{children}


);
}

[Abilara2001]

[JardelLacerda1]

Olá, boa tarde, estava com esse mesmo erro, ao alterar o nome dos arquivos que estão como page.tsx/js/ts o erro é resolvido, porém ao tentar exacutar o projeto, seja com o build ou dev, a aplicação não reconhece o arquivo como uma page por não estar entitulado como page, analisando a doc do next, ele solicita a extruturação como page. porém seguindo a documentação eu acabo esbarrando neste erro que estamos apresentado no topico.

[icyJoseph]

Strange.. well it should be page.tsx, but there must be something else going on here l

What Next.js version do you have?

Is there more error info?

[JardelLacerda1]

Versão: Next.js 14.2.14 , estou utilizando um tema do primereacto verona.

rodando o projeto em dev ele funciona perfeitamente, isso acontece somente quando tendo colocar em produção.

Aqui esta um print completo do erro no console

[JardelLacerda1]

Neste outro print coloquei até um arquivo exemplo ao lado sem o nome page.tsx, ele não aponta nenhum erro, somente em arquivos com nome de page, o problema é que deixando o arquivo sem o nome de page o next não reconhece como uma pagina

[icyJoseph]

That's because for pages to be reachable, there has to be a page.tsx file.

Quite strange. Do you have a link to this repository?

[icyJoseph]

The issue is pre-rendering. I wonder if the issue is somewhere else, like the layout files 🤔

[sheikhmubashi]

Hi @icyJoseph ,

I’m currently facing a deployment issue with my Azure Static Web App. The application was working perfectly fine until I added one more page. Now, I’m encountering the following error during deployment:

---End of Oryx build logs--- Web App Runtime Information. OS: linux, node version: 20 Finished building function app with Oryx Zipping Api Artifacts Done Zipping Api Artifacts The content server has rejected the request with: BadRequest Reason: The size of the function content was too large. The limit for this Static Web App is 262144000 bytes.

Here are the details of what I’ve tried so far:

Verified that the maximum size limit on Azure is set to 500MB, so it shouldn’t be a size issue.
Reviewed other suggestions mentioned in similar threads (e.g., reducing dependencies, optimizing the build), but none of them worked.
I’m attaching the following files for context:

• package.json
• next.config.js
• GitHub Action Workflow File

The issue has broken my production environment, and I’d really appreciate it if someone could help me resolve this.

Thank you in advance!

package.json:

{
  "name": "rewriterpro_nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emailjs/browser": "^3.11.0",
    "@headlessui/react": "^0.0.0-insiders.043edb8",
    "@heroicons/react": "^2.0.18",
    "@next/third-parties": "^14.1.3",
    "@react-oauth/google": "^0.12.1",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.9",
    "@types/jest": "^27.5.2",
    "@typescript-eslint/eslint-plugin": "^7.1.1",
    "@typescript-eslint/parser": "^7.1.1",
    "axios": "^1.6.7",
    "chatgpt": "^5.2.5",
    "crypto-browserify": "^3.12.0",
    "firebase": "^10.6.0",
    "next": "^14.1.1",
    "nextjs-toploader": "^1.6.12",
    "nprogress": "^0.2.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-firebase-hooks": "^5.1.1",
    "react-google-button": "^0.7.2",
    "react-minimal-pie-chart": "^8.4.0",
    "react-social-login-buttons": "^3.9.1",
    "rewriterpro_nextjs": "file:",
    "stream-browserify": "^3.0.0",
    "stripe": "^12.10.0",
    "txtgen": "^3.0.6",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8.57.0",
    "eslint-config-next": "14.1.1",
    "eslint-config-prettier": "^9.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

next config

/** @type {import('next').NextConfig} */
const nextConfig = {
};

export default nextConfig;

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_BUSH_0AF2C3D10 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: ".next" # Built app content directory - optional
          app_build_command: 'yarn run build'
          api_build_command: 'rm -rf ./node_modules/@next/swc-* && rm -rf ./.next/cache'
        env:  # Put a node version on the following line
          NODE_VERSION: 20
          NEXT_PUBLIC_GOOGLE_CLIENT_ID: ${{ secrets.NEXT_PUBLIC_GOOGLE_CLIENT_ID }}
          NEXT_PUBLIC_GOOGLE_CLIENT_SECRET: ${{ secrets.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET}}
          NEXT_PUBLIC_OPEN_AI_API_KEY: ${{ secrets.NEXT_PUBLIC_OPEN_AI_API_KEY}}
          NEXT_PUBLIC_WEBSITE_HTTPLOGGING_RETENTION_DAYS: ${{ secrets.NEXT_PUBLIC_WEBSITE_HTTPLOGGING_RETENTION_DAYS}}
          NEXT_PUBLIC_PRODUCT_ID: ${{ secrets.NEXT_PUBLIC_PRODUCT_ID}}
          NEXT_PUBLIC_ENV: ${{ secrets.NEXT_PUBLIC_ENV}}
          NEXT_PUBLIC_ATLAS_DATA_API_KEY: ${{ secrets.NEXT_PUBLIC_ATLAS_DATA_API_KEY }}
          NEXT_PUBLIC_EMAILJS_SERVICE_ID: ${{ secrets.NEXT_PUBLIC_EMAILJS_SERVICE_ID }}
          NEXT_PUBLIC_EMAILJS_TEMPLATE_ID: ${{ secrets.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID }}
          NEXT_PUBLIC_EMAILJS_TEMPLATE_ID_CONTACT_FORM: ${{ secrets.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID_CONTACT_FORM }}
          NEXT_PUBLIC_EMAILJS_PUBLIC_KEY: ${{ secrets.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY }}
          NEXT_PUBLIC_STRIPE_SECRET_KEY_PROD: ${{ secrets.NEXT_PUBLIC_STRIPE_SECRET_KEY_PROD }}
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          app_location: "/"
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_BUSH_0AF2C3D10 }}
          action: "close"

[vijayluxmimaddheshiya]

Hi , I am also facing build error and I have tried to make several changes with params and everything not sure what is possibly going wrong here kindly help.`
This is my page.tsx file where error is showing -
// import React from 'react';
import { getEventById, getRelatedEventsByCategory } from '@/lib/actions/event.actions'
import { formatDateTime } from '@/lib/utils';
import { SearchParamProps } from '@/types'
import Image from 'next/image';

const EventDetails = async ({ params: { id }, searchParams }: SearchParamProps) => {
const event = await getEventById(id);

const relatedEvents = await getRelatedEventsByCategory({
categoryId: event.category._id,
eventId: event._id,
page: searchParams.page as string,
});

return (
<>

      <div className="flex w-full flex-col gap-8 p-5 md:p-10">
        <div className="flex flex-col gap-6">
          <h2 className='h2-bold'>{event.title}</h2>

          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
            <div className="flex gap-3">
              <p className="p-bold-20 rounded-full bg-green-500/10 px-5 py-2 text-green-700">
                {event.isFree ? 'FREE' : `$${event.price}`}
              </p>
              <p className="p-medium-16 rounded-full bg-grey-500/10 px-4 py-2.5 text-grey-500">
                {event.category.name}
              </p>
            </div>

            <p className="p-medium-18 ml-2 mt-2 sm:mt-0">
              by{' '}
              <span className="text-primary-500">{event.organizer.firstName} {event.organizer.lastName}</span>
            </p>
          </div>
        </div>

        {/* <CheckoutButton event={event} /> */}

        <div className="flex flex-col gap-5">
          <div className='flex gap-2 md:gap-3'>
            <Image src="/assets/icons/calendar.svg" alt="calendar" 
            width={32} height={32} />
            <div className="p-medium-16 lg:p-regular-20 flex flex-wrap items-center">
              <p>
                {formatDateTime(event.startDateTime).dateOnly} - {' '}
                {formatDateTime(event.startDateTime).timeOnly}
              </p>
               <p>
                {formatDateTime(event.endDateTime).dateOnly} - {' '}
                 {formatDateTime(event.endDateTime).timeOnly}</p>
            </div>
          </div>

          <div className="p-regular-20 flex items-center gap-3">
            <Image src="/assets/icons/location.svg" alt="location" width={32} height={32} />
            <p className="p-medium-16 lg:p-regular-20">{event.location}</p>
          </div>
        </div>

        <div className="flex flex-col gap-2">
          <p className="p-bold-20 text-grey-600">What You'll Learn:</p>
          <p className="p-medium-16 lg:p-regular-18">{event.description}</p>
          <p className="p-medium-16 lg:p-regular-18 truncate text-primary-500 underline">{event.url}</p>
        </div>
      </div>
    </div>
  </section>

  {/* EVENTS with the same category */}
  <section className="wrapper my-8 flex flex-col gap-8 md:gap-12">
    <h2 className="h2-bold">Related Events</h2>

    {/* <Collection 
        data={relatedEvents?.data}
        emptyTitle="No Events Found"
        emptyStateSubtext="Come back later"
        collectionType="All_Events"
        limit={3}
        page={searchParams.page as string}
        totalPages={relatedEvents?.totalPages}
      /> */}
  </section>
</>

)
}
//export default function Page({ params, searchParams }: EventDetails) {}
export default EventDetails;
`

and the error that I am facing is in the picture below

Also there are certain things that I have tried
(1) I have tried to change the code for searchParams as this - const EventDetails = async ({
params,
searchParams,
}: {
params: Promise<{ id: string }>
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) => {
(2) On implementing the first one few times build worked but now its not working with more addition of code and also i added this in my system - npx @next/codemod@canary next-async-request-api .

but build is still facing not sure what more I can do from my side , kindly help.

[vijayluxmimaddheshiya]

Hi , If I change theabove stuff and did this again now its not compatible with my pageProps

export interface PageProps {
params?: Promise
searchParams?: Promise
}
and on build it is showing -

.next/types/app/(root)/page.ts:34:29
Type error: Type 'SearchParamProps' does not satisfy the constraint 'PageProps'.
Types of property 'searchParams' are incompatible.
Type '{ [key: string]: string | string[] | undefined; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag]

32 |
33 | // Check the prop type of the entry function

34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()

[icyJoseph]

What's your Page props definition? I feel like one should be able to fix this immediately. Got a link to a repository?

[icyJoseph]

Ok, here ya go:

Change the SearchParams type, as said before:

export type SearchParamProps = {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
};

And then roll these,

// on your (root)/page.tsx
export default async function Home({ searchParams }: SearchParamProps) {
  const search = await searchParams;
  const page = Number(search?.page || 1);
  const searchText = (search?.query as string) || '';
  const category = (search?.category as string) || '';

Also

// events/[id]/update/page.tsx
type UpdateEventProps = {
  params: Promise<{
    id: string;
  }>;
};

const UpdateEvent = async ({ params }: UpdateEventProps) => {
  const { sessionClaims } = auth();

  const id = (await params).id;

Also

// events/[id]/page.tsx
const EventDetails = async ({ params, searchParams }: SearchParamProps) => {
  const id = (await params).id;
  const event = await getEventById(id);

  const page = (await searchParams).page;

  const relatedEvents = await getRelatedEventsByCategory({
    categoryId: event.category._id,
    eventId: event._id,
    page: `${page}`,
  });

And the profile page

const ProfilePage = async ({ searchParams }: SearchParamProps) => {
  const search = await searchParams;
  const { sessionClaims } = auth();
  const userId = sessionClaims?.userId as string;

  const ordersPage = Number(search?.ordersPage) || 1;
  const eventsPage = Number(search?.eventsPage) || 1;

That should be it, I think

[icyJoseph]

@vijayluxmimaddheshiya you can also see a passing type checks build, https://stackblitz.com/edit/github-dckfsi3e?file=app%2F(root)%2Fevents%2F[id]%2Fpage.tsx,types%2Findex.ts,app%2F(root)%2Fevents%2F[id]%2Fupdate%2Fpage.tsx,app%2F(root)%2Fpage.tsx,app%2F(root)%2Fprofile%2Fpage.tsx here, though it fails at the clerk verification steps, but that's a whole different business

[vijayluxmimaddheshiya]

Hi, I made the changes and solved few minor changes on my own as well, and it worked fine. I deployed the code as well. Thank you so much. I have been struck with the same set of changes for ages. Thanks a lot!!

[vijayluxmimaddheshiya]

Here - https://github.com/vijayluxmimaddheshiya/Event_Hub_IGDTUW/tree/main

and for page Props -
export interface PageProps {
params?: Promise
searchParams?: Promise
}
,thanks!!

[shitaanshus27]

[icyJoseph]

So then your CheckoutPage component has an incorrect signature. The file system path shows no paran, and you don't use searchParams, so it needs to have no arguments.

Simply, create a new component within that file:

export default function Page() {
   return <CheckoutPage />
}

Something like that.

Posting screenshots without code is not very helpful.

I imagine you are also reusing your CheckoutPage component somewhere else? That's gonna break too. Move the CheckoutPage component to its own file, and import it from there into, page.tsx and other files

[shitaanshus27]

sharing code snippet with along with folder structure

[shitaanshus27]

file location:
app > checkout > layout.tsx

import CheckoutLayout from "@/components/checkout/CheckoutLayout";
import { createClient } from "@/lib/supabase/server";
import Script from "next/script";

export default async function CheckoutLayoutPage() {
  const supabase = createClient();
  const { data } = await supabase.rpc("get_current_customer_details");
  const { data: customer_address } = await supabase
    .from("customer_addresses")
    .select("*")
    .eq("customer_id", data![0].id);
  const razorpayKey = process.env.RAZORPAY_KEY_ID;
  const { data: userData } = await supabase.auth.getUser();
  return (
    <CheckoutLayout
      user={{ ...data![0], isAnonymous: userData.user?.is_anonymous }}
      razorpayKey={razorpayKey}
      address={customer_address}
    >
      <Script
        id="razorpay-checkout-js"
        src="https://checkout.razorpay.com/v1/checkout.js"
      />
    </CheckoutLayout>
  );
}

[shitaanshus27]

app > checkout > page.tsx

"use client";
import PaymentMethodForm from "@/components/checkout/PaymentMethodForm";
import ShippingAddressForm from "@/components/checkout/ShippingAddressForm";
import { GuestLoginComponent } from "@/components/components-guest-login";
import { Button } from "@/components/ui/button";
import { RadioGroupItem, RadioGroup } from "@/components/ui/radio-group";
import { placeOrderQuery } from "@/lib/actions/queries";
import { createClient } from "@/lib/supabase/client";
import { useCart } from "@/providers/cart-provider";
import { ChevronRight } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { toast } from "sonner";

const createOrderId = async (amount: number) => {
  try {
    const response = await fetch("/api/order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        amount: amount * 100,
      }),
    });

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    const data = await response.json();
    return data.orderId;
  } catch (error) {
    console.error("There was a problem with your fetch operation:", error);
  }
};

const CheckoutPage = ({
  user,
  isCartLoading,
  razorpayKey,
  address,
}: {
  user: any | null;
  isCartLoading?: boolean;
  razorpayKey: string;
  address: any | null;
}) => {
  const firtstTimeUser = address.length == 0;
  const [showAddressForm, setShowAddressForm] = useState(firtstTimeUser);
  const [selectedAddress, setSelectedAddress] = useState(address[0]);
  const router = useRouter();
  const { cart, setPaymentMode } = useCart();
  const [isPlacingOrder, setIsPlacingOrder] = useState(false);
  const processPayment = async (
    orderData: any,
    callback: (razorPayResponse) => void
  ) => {
    try {
      const amount = cart.cartSummary.payment_adjusted_total;

      const orderId = await createOrderId(amount);
      const options = {
        key: razorpayKey,
        amount: amount * 100,
        currency: "INR",
        name: orderData.fullName,
        description: "",
        order_id: orderId,
        handler: async function (response: any) {
          const data = {
            orderCreationId: orderId,
            razorpayPaymentId: response.razorpay_payment_id,
            razorpayOrderId: response.razorpay_order_id,
            razorpaySignature: response.razorpay_signature,
          };

          const result = await fetch("/api/verify", {
            method: "POST",
            body: JSON.stringify(data),
            headers: { "Content-Type": "application/json" },
          });
          const res = await result.json();
          if (res.isOk) {
            callback(data);
          } else {
            alert(res.message);
          }
        },
        prefill: {
          name: orderData.fullName,
          email: orderData.email,
        },
        theme: {
          color: "#000",
        },
      };
      // @ts-expect-error Razorpay does not have types
      const paymentObject = new window.Razorpay(options);
      paymentObject.on("payment.failed", function (response: any) {
        alert(response.error.description);
      });
      paymentObject.open();
    } catch (error) {
      console.error(error);
    }
  };

  const utmSource = localStorage.getItem("utm_source");
  const utmMedium = localStorage.getItem("utm_medium");
  const utmCampaign = localStorage.getItem("utm_campaign");

  const onSubmit = async () => {
    async function sendCheckout(orderData: any) {
      try {
        const data = await fetch("/api/facebook/checkout", {
          method: "POST",
          body: JSON.stringify({
            orderData,
          }),
        });
        const res = await data.json();
        if (res.success) {
          console.log("Checkout event sent successfully", res.response);
        } else {
          console.error("Failed to send Checkout event:", res.error.message);
        }
      } catch (error) {
        console.error("Error triggering Checkout event:", error);
      }
    }
    const supabase = createClient();
    const updatedFormData = {
      addressLine1: selectedAddress.street_address,
      city: selectedAddress.city,
      state: selectedAddress.state,
      zip: selectedAddress.postal_code,
      phoneNumber: selectedAddress.phone || user?.phone,
      email: selectedAddress.email || user?.meta_data.email,
      fullName: selectedAddress.full_name || user?.full_name,
      paymentMethod: cart.cartSummary.payment_mode,
    };

    try {
      setIsPlacingOrder(true);
      const { data: orderResponse } = await placeOrderQuery(updatedFormData);
      const { data: orderData, error } = await supabase
        .from("orders")
        .select("*, customers(*), order_items(*, products(*))")
        .eq("order_code", orderResponse!.result_order_code)
        .single();
      if (error || !orderData) {
        throw new Error("Order not found");
      }
      if (updatedFormData.paymentMethod === "card") {
        await processPayment(updatedFormData, async (razorPayResponse) => {
          orderData.payment_mode = "card";
          orderData.meta_data = {
            // @ts-expect-error Razorpay response is not typed
            ...orderData.meta_data,
            payment: razorPayResponse,
          };
          await fetch("/api/payment/capture", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              payload: orderData,
            }),
          });
          if (utmSource || utmMedium || utmCampaign) {
            sendCheckout(orderData);
          }
          router.replace(
            `/order-confirmation/${orderResponse!.result_order_code}`
          );
        });
      } else {
        orderData.payment_mode = "cod";
        orderData.meta_data = {
          // @ts-expect-error Razorpay response is not typed
          ...orderData.meta_data,
          payment: {
            method: "cod",
          },
        };

        await fetch("/api/payment/capture", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            payload: orderData,
          }),
        });
        if (utmSource || utmMedium || utmCampaign) {
          sendCheckout(orderData);
        }
        router.replace(
          `/order-confirmation/${orderResponse!.result_order_code}`
        );
      }
    } catch (error) {
      toast.error("There was an error placing the order");
      console.error("There was an error", error);
    } finally {
      setIsPlacingOrder(false);
    }
  };
  return (
    <>
      {user?.isAnonymous && <GuestLoginComponent />}
      {!user?.isAnonymous && (
        <div className="flex flex-col gap-4 mb-4">
          <h2 className="text-lg font-bold text-primary-800 my-2 pb-2">
            Shipping Addresses
          </h2>
          <label className="flex flex-col gap-2">
            <AddressSelector
              addresses={address}
              selectedAddress={selectedAddress}
              setSelectedAddress={setSelectedAddress}
              setShowAddressForm={setShowAddressForm}
              user={user}
            />
          </label>
          <div className="w-[50%]">
            {!showAddressForm && (
              <Button
                onClick={() => {
                  setShowAddressForm((prevState) => !prevState);
                }}
                type="button"
                variant="secondary"
              >
                Add New Address
              </Button>
            )}
          </div>
          {showAddressForm && (
            <ShippingAddressForm
              user={user}
              setShowAddressForm={setShowAddressForm}
            />
          )}
          <PaymentMethodForm
            setPaymentMode={setPaymentMode}
            user={user}
            paymentMode={cart.cartSummary.payment_mode}
          />
          <div className={"mt-8 flex justify-center items-center"}>
            <Button
              className="w-full"
              loading={isPlacingOrder || isCartLoading}
              onClick={onSubmit}
            >
              Complete Order
              <ChevronRight className="w-4 h-4 ml-2" />
            </Button>
          </div>
        </div>
      )}
    </>
  );
};

export default CheckoutPage;

const AddressSelector = ({
  addresses,
  selectedAddress,
  setSelectedAddress,
  setShowAddressForm,
  user,
}) => {
  return (
    <RadioGroup
      value={selectedAddress.id}
      onValueChange={(value) => {
        setShowAddressForm(false);
        setSelectedAddress(addresses.find((a) => a.id === value));
      }}
      className="space-y-4"
    >
      {addresses.map((address) => (
        <label key={address.id} className="flex items-center cursor-pointer">
          <RadioGroupItem value={address.id} />
          <span className="ml-2 text-xs md:text-sm font-normal leading-6">
            {[
              address.street_address,
              address.streetLine2,
              address.city,
              address.state,
              address.postalCode,
              address.phone,
              "India",
              address.phoneNumber,
              user.full_name,
            ]
              .filter(Boolean)
              .join(", ")}
          </span>
        </label>
      ))}
    </RadioGroup>
  );
};

[shitaanshus27]

components > CheckoutLayout.tsx

"use client";

import CheckoutPage from "@/app/checkout/page";
import { formatPrice } from "@/lib/utils";
import { useCart } from "@/providers/cart-provider";
import { useEffect } from "react";
import { ApplyCouponComponent } from "../apply-coupon";
import CartItems from "../cart/CartItems";
import { EmptyCart } from "../empty-cart";
import { Card, CardContent } from "../ui/card";
import { Loader2Icon } from "lucide-react";

export default function CheckoutLayout({
  children,
  user,
  razorpayKey,
  address,
}) {
  const { cart, isLoaded, syncCart, isLoading } = useCart();
  const { cartItems, cartSummary } = cart;
  useEffect(() => {
    syncCart();
  }, []);
  // Conditionally render based on cart emptiness
  if (isLoaded && cartItems.length === 0) {
    return (
      <div className="container mx-auto max-w-7xl h-screen flex justify-center items-center">
        <EmptyCart />
      </div>
    );
  }

  return (
    <div className="container mx-auto max-w-7xl min-h-screen">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 h-full">
        <div className="md:col-span-2 space-y-6 p-6 md:p-4">
          <CheckoutPage
            address={address}
            user={user}
            isCartLoading={isLoading}
            razorpayKey={razorpayKey}
          />
        </div>
        <div className="bg-gray-50 h-full">
          {/* <CartSummary className="border-none shadow-none bg-transparent p-6 md:p-4" /> */}
          <Card className="border-none shadow-none bg-transparent p-6 md:p-4">
            <CardContent className="border-b border-gray-200 pb-4 space-y-4">
              <h1 className="text-xl font-semibold">Order Summary</h1>
              {cartSummary?.subtotal ? (
                <>
                  <div className="space-y-4 w-full mt-4">
                    <div className="flex justify-between">
                      <span className="text-sm font-bold">Subtotal</span>
                      <span className="text-sm font-bold">
                        {formatPrice((cartSummary?.subtotal * 100) / 105 || 0)}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm font-bold">Tax</span>
                      <span className="text-sm font-bold">
                        {formatPrice(
                          cartSummary?.subtotal -
                            (cartSummary?.subtotal * 100) / 105
                        )}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm font-bold">
                        {cartSummary?.payment_mode === "card"
                          ? "Online Payment Discount"
                          : "Cash On Delivery Fee"}
                      </span>
                      <span className="text-sm font-bold">
                        {formatPrice(
                          cartSummary?.payment_adjustment_amount || 0
                        )}
                      </span>
                    </div>
                    {cartSummary?.shipping_added && (
                      <div className="flex justify-between font-bold">
                        <span className="text-sm font-bold">
                          Shipping Charges
                        </span>
                        <span className="text-sm font-bold">
                          {formatPrice(cartSummary?.shipping_amount || 0)}
                        </span>
                      </div>
                    )}
                    <div className="flex justify-between font-bold">
                      <span className="text-base">Total</span>
                      <span>
                        {formatPrice(cartSummary?.payment_adjusted_total || 0)}
                      </span>
                    </div>
                  </div>
                  <ApplyCouponComponent cart={cartSummary} />
                </>
              ) : (
                <Loader2Icon className="w-8 h-8 animate-spin" />
              )}
            </CardContent>
            <CardContent className="p-6 space-y-4">
              <CartItems />
            </CardContent>
            <CardContent></CardContent>
          </Card>
        </div>
      </div>
      {children}
    </div>
  );
}

[gurjaspinder]

Hi @icyJoseph

"use client";
import { ContentLayout } from "@/components/admin-panel/content-layout";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Input } from "@/components/ui/input";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { useToast } from "@/components/ui/use-toast";
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
import { FormProvider, useForm } from "react-hook-form";
import React, { useEffect, useState } from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import axiosInstance from "@/hooks/axiosConfig";
import Link from "next/link";
import { getParamsAndClear } from "@/hooks/navigation";
const formSchema = z.object({
firstName: z.string().min(1, { message: "First Name is required." }),
lastName: z.string().min(1, { message: "Last Name is required." }),
email: z.string().optional(),
phoneNumber: z.string().optional(),
notes: z.string().optional(),
isActive: z.boolean().default(true),
});
type Guest = z.infer;

interface GuestPageProps {
onSubmit?: (newGuest: Guest) => void;
hideNavbar?: boolean;
}
export default function GuestPage({ onSubmit,hideNavbar = false }: GuestPageProps) {
const methods = useForm<z.infer>({
resolver: zodResolver(formSchema),
defaultValues: {
firstName: "",
lastName: "",
email: "",
phoneNumber: "",
notes: "",
isActive: true,
},
});

const { toast } = useToast();
const [isUpdateMode, setIsUpdateMode] = useState(false);
const [guestId, setGuestId] = useState<string | null>(null);
const [activeTab, setActiveTab] = useState("details");
const [roomOptions, setRoomOptions] = useState<{ _id: string; name: string }[]>([]);

const { reset, handleSubmit, control } = methods;

const checkForEdit = async () => {
const params = getParamsAndClear();
if (params && params.guest) {
setIsUpdateMode(true);
setGuestId(params.guest._id);
axiosInstance.get(/guest/${params.guest._id})
.then(response => {
reset(response.data.data);
})
.catch(error => {
console.error("Error fetching guest data:", error);
});
}
};

useEffect(() => {
checkForEdit();
}, [reset]);

async function handleFormSubmit(values: z.infer) {
if (isUpdateMode) {
await updateGuest(values);
} else {
const newGuest = await addGuest(values);
if (newGuest && onSubmit) {
onSubmit?.(newGuest); // Call the parent's onSubmit callback
}
}
}

const addGuest = async (guestData: any) => {
try {
const response = await axiosInstance.post("/guest", guestData);
if (response.data.success) {
const newGuest = response.data.data; // Extract the new guest data
setGuestId(newGuest._id);
setIsUpdateMode(true);
toast({ title: "Success", description: response.data.message });
return newGuest; // Return the new guest for parent usage
} else {
toast({ title: "Error", description: response.data.message, variant: "destructive" });
}
} catch {
toast({ title: "Error", description: "An unexpected error occurred.", variant: "destructive" });
}
};

const updateGuest = async (guestData: any) => {
if (!guestId) return;
try {
const response = await axiosInstance.put(/guest/${guestId}, guestData);
if (response.data.success) {
toast({ title: "Success", description: response.data.message });
} else {
toast({ title: "Error", description: response.data.message, variant: "destructive" });
}
} catch {
toast({ title: "Error", description: "An unexpected error occurred.", variant: "destructive" });
}
};

return (

Guest

Guest





Guest Details

Save

  <Card className="pt-4">
    <CardContent>
      <FormProvider {...methods}>
        <form id="guest-form" onSubmit={handleSubmit(handleFormSubmit)} className="grid gap-6">
          <Tabs value={activeTab} onValueChange={setActiveTab} className="grid gap-6">
            <TabsList className="grid grid-cols-2 gap-2 sm:grid-cols-2">
              <TabsTrigger value="details">Details</TabsTrigger>
              <TabsTrigger value="notes">Notes</TabsTrigger>
            </TabsList>

            <TabsContent value="details">
              <div className="grid gap-4">
                <div className="grid sm:grid-cols-2 grid-cols-1 gap-4">
                <FormField control={control} name="firstName" render={({ field }) => (
                  <FormItem><FormLabel>First Name</FormLabel><FormControl><Input placeholder="John" {...field} /></FormControl><FormMessage /></FormItem>
                )} />

                <FormField control={control} name="lastName" render={({ field }) => (
                  <FormItem><FormLabel>Last Name</FormLabel><FormControl><Input placeholder="Doe" {...field} /></FormControl><FormMessage /></FormItem>
                )} />
                </div>
                <div className="grid sm:grid-cols-2 grid-cols-1 gap-4">
                <FormField control={control} name="email" render={({ field }) => (
                  <FormItem><FormLabel>Email</FormLabel><FormControl><Input placeholder="[email protected]" {...field} /></FormControl><FormMessage /></FormItem>
                )} />

                <FormField control={control} name="phoneNumber" render={({ field }) => (
                  <FormItem><FormLabel>Phone Number</FormLabel><FormControl><Input placeholder="+123456789" {...field} /></FormControl><FormMessage /></FormItem>
                )} />
                </div>
              </div>
            </TabsContent>

            <TabsContent value="notes">
              <FormField control={control} name="notes" render={({ field }) => (
                <FormItem><FormLabel>Notes</FormLabel><FormControl><Textarea placeholder="Any additional details..." {...field} /></FormControl><FormMessage /></FormItem>
              )} />
            </TabsContent>
          </Tabs>
        </form>
      </FormProvider>
    </CardContent>
  </Card>
</ContentLayout>

);
}

[icyJoseph]

The problem is clearly here:

export default function GuestPage({ onSubmit,hideNavbar = false }: GuestPageProps) {

Pages have to have a specific set of props, params, and searchParams.

1. Rename app/(demo)/guest/page.tsx to app/(demo)/guest/guest-page.tsx
2. Create app/(demo)/guest/page.tsx
3. In the new app/(demo)/guest/page.tsx, import GuestPage
4. Render this:

import GuestPage from './guest-page';

export default function Page(){
   return <GuestPage />
}

[gurjaspinder]

Hi @icyJoseph ,

On vs code terminal i don't get this error and it runs successfully.

[gurjaspinder]

On local getting no error. In build getting error build failed due to webpack errors

[icyJoseph]

Are you running npm run build locally?

The screenshot you shared, shows more stuff is above and that's the errors that need to be fixed

Are you on Windows OS?

[gurjaspinder]

getting no error when run build in terminal but on render.com when i am deploying getting error also i am not windows os

[icyJoseph]

Ok, then we can discard some potential issues.

What's the error though? "Webpack errors" is the summary, but there seems to be problems importing your components?

Are you using Docker when deploying?

Have you tried removing your package-lock, and re-running the install to generate a new one?

Again, without looking at the actual errors reported we can only guess

[gurjaspinder]

Not using docker for deployment