TypeError: crypto.randomUUID is not a function

Question

My Next.js app works like a charm on http://localhost:3000/.

I added the following line to my hosts file.

127.0.0.1 whatever.local

When I connect to http://whatever.local:3000/, my client-side components return the following error.

TypeError: crypto.randomUUID is not a function

I use crypto.randomUUID() when creating child objects such as in the the following example.

{lookupItemList.map((lookupItem: LookupItem) =>
    <option
        key={crypto.randomUUID()}
        value={lookupItem.key}>
        {lookupItem.value}
    </option>
)}

Answer 1

first, it's not a good practice to use crypto.randomUUID() as key of your elements, instead use item id's or any other specific data on your items.

and for your question,Note that window.crypto.randomUUID is only available under HTTPS context. localhost is treated a secure origin, even without HTTPS. For everything apart from localhost, you do need HTTPS.