In a Next.js API route, I import webcrypto as follows:

import { webcrypto } from 'crypto'

Later, this is used as follows:

const random = webcrypto.getRandomValues(new Uint8Array(8))

This works fine when I test on localhost, but as soon as I deploy to production (on Vercel), I get the following error:

ERROR   [next-auth][error][SIGNIN_EMAIL_ERROR] 
https://next-auth.js.org/errors#signin_email_error Cannot read property 'getRandomValues' of undefined {
  error: {
    message: "Cannot read property 'getRandomValues' of undefined",
    stack: "TypeError: Cannot read property 'getRandomValues' of undefined\n" +
      '    at Object.generateVerificationToken (/var/task/.next/server/chunks/696.js:97:78)\n' +
      '    at email (/var/task/node_modules/next-auth/core/lib/email/signin.js:22:188)\n' +
      '    at Object.signin (/var/task/node_modules/next-auth/core/routes/signin.js:117:50)\n' +
      '    at processTicksAndRejections (internal/process/task_queues.js:95:5)\n' +
      '    at async NextAuthHandler (/var/task/node_modules/next-auth/core/index.js:238:26)\n' +
      '    at async NextAuthNextHandler (/var/task/node_modules/next-auth/next/index.js:23:19)\n' +
      '    at async /var/task/node_modules/next-auth/next/index.js:59:32\n' +
      '    at async Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils/node.js:182:9)\n' +
      '    at async NextNodeServer.runApi (/var/task/node_modules/next/dist/server/next-server.js:386:9)\n' +
      '    at async Object.fn (/var/task/node_modules/next/dist/server/base-server.js:488:37)',
    name: 'TypeError'
  },
  providerId: 'email',
  message: "Cannot read property 'getRandomValues' of undefined"
}

Where this is the key problem:

message: "Cannot read property 'getRandomValues' of undefined"

Why would this not work when deployed, but work fine on localhost? What can I do to get it working?

Note: the deployment uses https