Next.js Discord

Discord Forum

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
Open in Discord
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:
            <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 6
And post.id is a string in this format: 66f6cf82167f757a6bc91c1a

6 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
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.