5

I'm trying this

import { randomUUID } from 'crypto'
var id = randomUUID()

in my NextJs app but I'm getting this error:

index.js?46cb:369 Uncaught TypeError: (0 , crypto__WEBPACK_IMPORTED_MODULE_5__.randomUUID) is not a function at eval (index.js?bee7:8:20) at Module../pages/index.js (index.js?ts=1649816623582:5680:1) at Module.options.factory (webpack.js?ts=1649816623582:618:31) at webpack_require (webpack.js?ts=1649816623582:37:33) at fn (webpack.js?ts=1649816623582:287:21) at eval (?595a:5:16) at eval (route-loader.js?ea34:235:51)

it seems like the crypto library is available to middleware in NextJs (though it should be available at the browser) but that seems complicated to implement. can anyone suggest how to generate a UUID in NextJs?

ekkis
  • 9,804
  • 13
  • 55
  • 105
  • Use an external library instead like `uuid` or `short-uuid` so it can be bundled and shipped to the client too. – kelsny Apr 13 '22 at 02:51

2 Answers2

11

Because crypto is a built-in module in Node.js, you cannot use it on the client. You can use an external library like uuid or short-uuid to generate uuids instead:

import { v4 } from "uuid";

v4(); // deadbeef-deadbeef-deadbeef-deadbeef or some uuid

Using external cross-platform libraries allows you to use it both on the server and in the client, which would resolve the issue.

kelsny
  • 23,009
  • 3
  • 19
  • 48
5

Crypto is built-in Node module. You cannot use that in client side. Use this uuid Package

import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d
Sudip Shrestha
  • 321
  • 1
  • 9