vitepress 打包提示 zrender: undefined (reading 'indexOf')

问题

打包执行 npm run docs:build 后提示 zrender: undefined (reading 'indexOf')

✓ building client + server bundles...
⠴ rendering pages...TypeError: Cannot read properties of undefined (reading 'indexOf')
    at file:///D:/www.zichin.com/blog/node_modules/.pnpm/zrender@5.5.0/node_modules/zrender/lib/core/env.js:36:28
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async loadPage (file:///D:/www.zichin.com/blog/docs/.vitepress/.temp/pageviews.ClpLjHhX.js:1128:18)
    at async Object.go (file:///D:/www.zichin.com/blog/docs/.vitepress/.temp/pageviews.ClpLjHhX.js:1117:5)
    at async render (file:///D:/www.zichin.com/blog/docs/.vitepress/.temp/app.js?t=1712803543263:5016:3)
    at async renderPage (file:///D:/www.zichin.com/blog/node_modules/.pnpm/vitepress@1.1.0_@algolia+client-search@4.23.2_axios@1.6.8_sass@1.74.1_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-Csn-CKFx.js:46550:19)
    at async pMap.concurrency (file:///D:/www.zichin.com/blog/node_modules/.pnpm/vitepress@1.1.0_@algolia+client-search@4.23.2_axios@1.6.8_sass@1.74.1_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-Csn-CKFx.js:46794:11)
    at async file:///D:/www.zichin.com/blog/node_modules/.pnpm/vitepress@1.1.0_@algolia+client-search@4.23.2_axios@1.6.8_sass@1.74.1_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-Csn-CKFx.js:2614:20
✖ rendering pages...
build error:

原因

这个错误是因为在构建过程中，node_modules/.pnpm/zrender@5.5.0/node_modules/zrender/lib/core/env.js:36:28 语法报错。

else if (typeof navigator === 'undefined'
    || navigator.userAgent.indexOf('Node.js') === 0) { 
    env.node = true;
    env.svgSupported = true;
}

原因是 navigator.userAgent 未定义, 导致 indexOf 方法语法报错。

解决

在 config.mjs文件中添加如下代码:

export default defineConfig((ctx) => {
  globalThis.navigator ??= {}; 
  globalThis.navigator.userAgent ??= 'Node.js'; 
  return {
    lang: "zh-CN",
    title: "🇨🇳子卿全栈系列 💯",
    // 其他代码
  };
});

globalThis.navigator ??= {}; 可以解决 navigator 未定义的问题。 globalThis.navigator.userAgent ??= 'Node.js'; 可以解决 navigator.userAgent 未定义的问题。