node.js - TypeError: crypto.randomUUID er ikke en funksjon

Min Next.js-app fungerer som en sjarm på http://localhost:3000/.

Jeg la til følgende linje i hosts-filen min.

127.0.0.1 whatever.local

Når jeg kobler til http://whatever.local:3000/, returnerer mine klientside-komponenter følgende feil.

TypeError: crypto.randomUUID er ikke en funksjon

Jeg bruker crypto.randomUUID() når jeg oppretter underordnede objekter, som i følgende eksempel.

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

Svar #1

for det første er det ikke god praksis å bruke crypto.randomUUID() som nøkkel for elementene dine, bruk i stedet element-ID-er eller annen spesifikk informasjon om elementene dine.

og for spørsmålet ditt, merk at window.crypto.randomUUID bare er tilgjengelig under HTTPS-kontekst. localhost behandles som en sikker opprinnelse, selv uten HTTPS. For alt annet enn localhost, trenger du HTTPS.

Svar #2

Som et alternativ til crypto.randomUUID(), kan du bruke uuid-biblioteket.

import { v4 as uuidv4 } from 'uuid';
let uuid = uuidv4(); 
console.log(uuid) // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

så, for koden din:

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

Relaterte artikler