nuxt3项目上线后某页面初次进入无问题，刷新页面后500错误。报错： Cannot read properties of undefined (reading ‘userAgent’)

问题

弄了一个nuxt项目，其在本地开发没有问题，但是上线后某路径下页面初次进入时候正常，但是刷新页面后就报错500，且控制台没有报错信息。通过后台看日志，内容是：

[Vue Router warn]: uncaught error during route navigation:
9|carl-cosmos  | TypeError: Cannot read properties of undefined (reading 'userAgent')
9|carl-cosmos  |     at file:///center/carl-cosmos/.output/server/chunks/build/Welcome-BPfZujf3.mjs:240:72
9|carl-cosmos  |     at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
9|carl-cosmos  |     at onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:547:26)
9|carl-cosmos  |     at setup (file:///center/carl-cosmos/.output/server/chunks/build/server.mjs:5017:76)
9|carl-cosmos  |     at Object.callAsync (file:///center/carl-cosmos/.output/server/chunks/nitro/nitro.mjs:6600:16)
9|carl-cosmos  |     at applyPlugin (file:///center/carl-cosmos/.output/server/chunks/build/server.mjs:4259:35)
9|carl-cosmos  |     at executePlugin (file:///center/carl-cosmos/.output/server/chunks/build/server.mjs:4297:9)
9|carl-cosmos  |     at applyPlugins (file:///center/carl-cosmos/.output/server/chunks/build/server.mjs:4311:5)
9|carl-cosmos  |     at createNuxtAppServer (file:///center/carl-cosmos/.output/server/chunks/build/server.mjs:9078:7)
9|carl-cosmos  |     at Object.renderToString (file:///center/carl-cosmos/.output/server/node_modules/vue-bundle-renderer/dist/runtime.mjs:173:19)

首先第一个警告忽视即可，真正的问题是识别不了userAgent。定位打包后的源代码，内容主要是通过window的userAgent来判断是不是IE。

分析

首先可以确定，自己的代码中并没有相关使用userAgent的内容，所以问题肯定是三方库里面的问题。后续注意排查，将问题定位到naive ui，至少是两个组件的问题。我本身已经对naive ui开启了ssr，但是可能n-modal和n-popselect存在bug，ssr渲染的支持不够，所以导致了在服务端拼装时候就找userAgent了，然后找不到，报错了。

解决

找到问题了，解决方案很简单：1是不用这个组件；2是用client-only组件将相关内容包裹，使其仅仅客户端渲染，避免了服务端的问题。