Next.js v13中Crypto.randomUUID()无法正常使用的问题求助

• 使用Next.js v13（稳定版，无./app目录），运行在Ubuntu WSL环境中，搭配Node v18
• 根据Node官方文档，Crypto API从Node v14版本左右就已存在
• 已在当前Node环境中测试：导入并运行crypto.randomUUID()，打印的完整对象结构与文档描述一致

假设有如下简单组件：

import crypto from 'crypto';

export default function Crypto() {
  console.log(crypto);

  return (
    <p>
      {crypto.randomUUID()}
    </p>
  );
}

Next.js提示“客户端和服务端编译成功，耗时397毫秒”。但UUID在浏览器中显示数毫秒后，Next.js抛出多个围绕randomUUID不是函数的错误。

注释掉段落中的方法调用后，console.log(crypto)会执行两次，在开发者工具中打印结果显示：

• 一次来自“react devtools backend”，另一次来自webpack
• 服务端Next CLI打印的crypto对象包含randomUUID方法
• 客户端打印的crypto对象中找不到randomUUID()方法，与Node文档相比多个方法缺失；但直接在开发者工具中执行console.log(crypto)时，其原型中确实存在该方法
• 打印的crypto对象结构类似Node环境中的对象，和Chrome V8的crypto对象结构完全不同，推测Webpack打包过程中导致方法丢失
• UUID仅能短暂显示，关闭错误提示后页面变为空白，UUID消失

补充说明
导入crypto是为了适配Node环境运行：Next.js是SSR框架，会先在服务端运行并尽可能渲染为HTML后交付给客户端，若不导入，服务端调用Crypto时Node会抛出错误。

于是修改代码，仅在浏览器环境（Window对象存在时）运行，使用Chromium V8原生Crypto对象：

// import crypto from 'crypto';

export default function Crypto() {
  if (typeof window !== 'undefined') {
    console.log('CLIENT: ', crypto.randomUUID());

    return (
      <p>
        {crypto.randomUUID()}
      </p>
    );
  }

  return (
    <h1>SERVER SIDE</h1>
  );
}

修改后代码仍然会执行两次（Next.js的机制导致），一次在服务端，一次在客户端，此时会出现客户端文本与服务端不匹配的提示，这符合预期，因为UUID函数每次返回的结果都不同。

内容的提问来源于stack exchange，提问作者Enrique Dominguez