#key must have the following format {A}:{B}, where A is 24 hex characters and B is 64 hex characters

7 messages · Page 1 of 1 (latest)

keen sapphire
#

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>```

```tsx
<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`
image.png
finite rapidsBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

keen sapphire
#

I also tried converting the valid.id to a string, that did not work either.

sweet bone
#

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.

keen sapphire
sweet bone
#

it seems so as per the error message

keen sapphire
#

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.