When I run build on local I get no errors, but in Vercel I get this error:
Error occurred prerendering page "/pt/my-profile".
TypeError: Cannot read properties of undefined (reading '0')
It only happens in this page.tsx:
"use client";
import Text from "@/app/components/Text";
import {
Button,
Card,
CardBody,
Link,
Snippet,
Avatar,
} from "@nextui-org/react";
import { IconPencil, IconTrash } from "@tabler/icons-react";
import { useUserContext } from "@/app/context/UserContext";
import { getCountry } from "@/app/utils/getCountry";
import { useTranslations } from "next-intl";
import PillPalIcon from "./components/PillPalIcon";
import HealthSyncIcon from "./components/HealthSyncIcon";
const MyProfilePage = ({
params: { locale },
}: {
params: { locale: string };
}) => {
const { user } = useUserContext();
const country = getCountry();
const t = useTranslations("myProfile");
const details: string[][] = [
[
t("personalInfo.name"),
t("personalInfo.age"),
t("personalInfo.gender"),
t("personalInfo.country"),
t("personalInfo.language"),
],
[user?.name, user?.age, user?.gender, country, locale],
];
return (
<main className="min-h-screen flex flex-wrap justify-evenly p-12">
<section className="flex flex-col [&>*]:p-10 [&>*]:my-4">
<Card>
<Text>
{t("title")}: {user.profileType}
</Text>
<CardBody className="flex flex-row items-center">
<Avatar name={""} size="lg" className="m-2" />
<div className="[&>*]:m-2 flex flex-col">
<Button
radius="full"
variant="solid"
color="primary"
endContent={<IconPencil />}
>
{t("btns.change")}
</Button>
<Button
radius="full"
variant="bordered"
endContent={<IconTrash />}
>
{t("btns.remove")}
</Button>
</div>
</CardBody>
</Card>
<Card>
<Text> {t("personalInfo.title")}</Text>
<CardBody className="flex flex-row justify-between">
{details?.map((detail, i) => (
<div
key={i}
style={{
fontWeight: i === 0 ? "bold" : "normal",
}}
className="flex flex-col font-black [&>*]:m-2"
>
{detail?.map((item, j) => (
<p key={j}>{item}</p>
))}
</div>
))}
</CardBody>
</Card>
<Card>
<Text>{t("conditions.title")}</Text>
<CardBody className="[&>*]:m-2">
{user?.existingHealthCondition &&
user?.existingHealthCondition.map(
(condition: string, i: number) => (
<Snippet
hideCopyButton
hideSymbol
key={i}
className="grid place-content-center"
>
{condition}
</Snippet>
)
)}
</CardBody>
</Card>
</section>
<section className="flex flex-col [&>*]:p-10 [&>*]:my-4">
<Card>
<Text>{t("sync.title")}</Text>
<p>{t("sync.description")}</p>
<CardBody className="flex flex-row justify-between">
<div className="flex flex-col [&>*]:m-2">
<p className="flex items-center [&>*]:mr-2">
<PillPalIcon />
PillPal
</p>
<p className="flex items-center [&>*]:mr-2">
<HealthSyncIcon />
HealthSync
</p>
</div>
<div className="flex flex-col [&>*]:m-2">
<Link className="text-[#63A87D]">{t("sync.pillpal")}</Link>
<Link className="text-[#63A87D]">{t("sync.healthsync")}</Link>
</div>
</CardBody>
</Card>
</section>
</main>
);
};
export default MyProfilePage;
Its a profile page with nothing particular, fairly static… It works perfectly in local.
Im using next": "14.0.2"
This is my next.config.json
:
const createNextIntlPlugin = require("next-intl/plugin");
const withNextIntl = createNextIntlPlugin();
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
eslint: {
ignoreDuringBuilds: true,
},
compiler: {},
images: {
unoptimized: true,
remotePatterns: [
{
protocol: "https",
hostname: "d1pe6f90ru47yo.cloudfront.net",
},
],
},
};
module.exports = withNextIntl(nextConfig);
I’ve tried to downgrade and upgrade some versions many times… But nothing seems to be working. And The only info I get from Vercel is that line TypeError: Cannot read properties of undefined (reading '0')
Which is false, because If I Comment all the code of the page I still get the error…
Pls can someone help me?