key must have the following format {A}:{B}, where A is 24 hex characters and B is 64 hex characters
Unanswered
Broad-snouted Caiman posted this in #help-forum
Broad-snouted CaimanOP
I keep getting this weird error when trying to deploy the new build on Vercel. It says there's an issue with the keys on the page /about, and I checked that page all keys are in a valid format. I am not sure what the issue is, building locally is fine, but when building on Vercel, I get that error.
Here is the code where keys are used:
And
Here is the code where keys are used:
<dl className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base leading-7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
{values.map((value) => (
<div key={value.id}>
<dt className="font-semibold text-[#1e1e1e]">{value.name}</dt>
<dd className="mt-1 text-gray-600">{value.description}</dd>
</div>
))}
</dl><article
key={post.id}
className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-[#1e1e1e] px-8 pb-8 pt-80 sm:pt-48 lg:pt-80"
>
<img src={post.feature_image || "/images/blog_placeholder.jpg"} alt="" className="absolute inset-0 -z-10 h-full w-full object-cover" />
<div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
<div className="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10" />
<div className="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
<time dateTime={post.created_at} className="mr-8">
{moment(post.created_at).format("MMMM D, YYYY")}
</time>
<div className="-ml-4 flex items-center gap-x-4">
<svg viewBox="0 0 2 2" className="-ml-0.5 h-0.5 w-0.5 flex-none fill-white/50">
<circle cx={1} cy={1} r={1} />
</svg>
<div className="flex gap-x-2.5">
<img src={post.primary_author.profile_image || `https://ui-avatars.com/api/?background=random&name=${post.primary_author.name}`} alt="" className="h-6 w-6 flex-none rounded-full bg-white/10" />
{post.primary_author.name}
</div>
</div>
</div>
<h3 className="mt-3 text-lg font-semibold leading-6 text-white">
<a href={post.url}>
<span className="absolute inset-0" />
{post.title}
</a>
</h3>
</article>value.id is a number, 1 to 6And
post.id is a string in this format: 66f6cf82167f757a6bc91c1a6 Replies
Broad-snouted CaimanOP
I also tried converting the valid.id to a string, that did not work either.
Kurilian Bobtail
the error is not related to react's
key=. It seems that during the build process you are trying to call a function with key and url (and probably other props), and your call is being rejected due to invalid input.@Kurilian Bobtail the error is not related to react's `key=`. It seems that during the build process you are trying to call a function with `key` and `url` (and probably other props), and your call is being rejected due to invalid input.
Broad-snouted CaimanOP
During the build process of the about page, right?
Kurilian Bobtail
it seems so as per the error message
Broad-snouted CaimanOP
Hmm, well there's nothing that I'm doing that uses key and url when calling a function. I am only calling a server action function, which just fetches data from an external API and returns it back. I will remove that and see if that fixes the issue.
That fixed the issue. ts-ghost/admin-api might be only compatible on the client side.