Nuxt 3中使用jsonwebtoken生成JWT遇NODE_DEBUG错误求助

问题现象 #

在Nuxt 3（3.0.0-rc.11）项目中使用MSW模拟API接口时，原本功能正常，引入jsonwebtoken库生成JWT访问令牌模拟登录接口后，触发以下错误：

util.js:109 Uncaught TypeError: Cannot read properties of undefined (reading 'NODE_DEBUG')
    at node_modules/util/util.js (util.js:109:17)
    at __require (chunk-7NEK6ARH.js?v=bb8c835c:9:50)
    at node_modules/jws/lib/data-stream.js (data-stream.js:4:12)
    at __require (chunk-7NEK6ARH.js?v=bb8c835c:9:50)
    at node_modules/jws/lib/sign-stream.js (sign-stream.js:3:18)
    at __require (chunk-7NEK6ARH.js?v=bb8c835c:9:50)
    at node_modules/jws/index.js (index.js:2:18)
    at __require (chunk-7NEK6ARH.js?v=bb8c835c:9:50)
    at node_modules/jsonwebtoken/decode.js (decode.js:1:11)
    at __require (chunk-7NEK6ARH.js?v=bb8c835c:9:50)

相关代码 #

登录接口模拟代码（@/mocks/auth.js）

import {rest} from 'msw'
import { addBaseUrl, makeResponse } from './helpers'
import jwt from 'jsonwebtoken'

export default [
   rest.post(addBaseUrl('/api/auth/login/'), (req, res, ctx) => {
     const json = {
       access: jwt.sign(
         {test: 'test'},
         'secret',
         {expiresIn: 600}
       )
     }
     return makeResponse({res, ctx, status: 200, delay: 1000, json})
  }),
]

package.json配置

{
  "private": true,
  "scripts": {
    "start": "nuxt start",
    "build": "nuxt build",
    "dev": "nuxt dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@iconify/vue": "^4.0.0",
    "autoprefixer": "^10.4.8",
    "msw": "^0.47.3",
    "nuxt": "3.0.0-rc.11",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8"
  },
  "dependencies": {
    "@vue-leaflet/vue-leaflet": "^0.6.1",
    "@vuelidate/core": "^2.0.0-alpha.44",
    "@vuelidate/validators": "^2.0.0-alpha.31",
    "dayjs": "^1.11.5",
    "jsonwebtoken": "^8.5.1",
    "jwt-decode": "^3.1.2",
    "leaflet": "^1.9.1",
    "vue-google-charts": "^1.1.0",
    "vue3-carousel": "^0.1.46"
  },
  "packageManager": "yarn@3.2.3",
  "msw": {
    "workerDirectory": "public"
  }
}

问题原因 #

jsonwebtoken是为Node.js环境设计的库，依赖Node.js核心模块（如util、stream）及环境变量（如NODE_DEBUG），而MSW的Service Worker运行在浏览器环境中，不存在这些Node.js专属的模块和变量，因此触发报错。

解决方案 #

改用浏览器兼容的JWT库替代jsonwebtoken，推荐使用jose（现代、轻量且兼容浏览器/Node.js双环境）：

1. 安装jose库：

yarn add jose

2. 修改登录接口模拟代码：

import {rest} from 'msw'
import { addBaseUrl, makeResponse } from './helpers'
import { SignJWT } from 'jose'

export default [
   rest.post(addBaseUrl('/api/auth/login/'), async (req, res, ctx) => {
     // 将密钥转换为Uint8Array格式（jose库要求）
     const secretKey = new TextEncoder().encode('secret')
     // 生成JWT令牌
     const accessToken = await new SignJWT({ test: 'test' })
       .setProtectedHeader({ alg: 'HS256' }) // 指定签名算法
       .setExpirationTime('10m') // 设置过期时间（对应原600秒）
       .sign(secretKey)

     return makeResponse({
       res,
       ctx,
       status: 200,
       delay: 1000,
       json: { access: accessToken }
     })
  }),
]

3. 移除原jsonwebtoken依赖（可选）：

yarn remove jsonwebtoken

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