vitepress 打包 echarts 时 zrender 报错

问题描述

vitepress@1.0.1使用了echart@5.5.0会在构建时报错

打包时，发现如下报错：

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

依赖包版本如下：

npm ls
blog@ D:\www.zichin.com\blog
├── echarts@5.5.0 -> .\node_modules\.pnpm\echarts@5.5.0\node_modules\echarts
├── vitepress@1.0.1 -> .\node_modules\.pnpm\vitepress@1.0.1_@algolia+client-search@4.22.1_sass@1.72.0_search-insights@2.13.0\node_modules\vitepress
├── vue@3.4.21 extraneous -> .\node_modules\.pnpm\vue@3.4.21\node_modules\vue

详细报错如下：

> vitepress build docs --minify

  vitepress v1.0.1

⠦ building client + server bundles...
(!) Some chunks are larger than 600 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ 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.B3t592Xy.js:1124:18)
    at async Object.go (file:///D:/www.zichin.com/blog/docs/.vitepress/.temp/pageviews.B3t592Xy.js:1113:5)
    at async render (file:///D:/www.zichin.com/blog/docs/.vitepress/.temp/app.js?t=1711446838791:5030:3)
    at async renderPage (file:///D:/www.zichin.com/blog/node_modules/.pnpm/vitepress@1.0.1_@algolia+client-search@4.22.1_sass@1.72.0_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-C_2bYS0g.js:46514:19)
    at async pMap.concurrency (file:///D:/www.zichin.com/blog/node_modules/.pnpm/vitepress@1.0.1_@algolia+client-search@4.22.1_sass@1.72.0_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-C_2bYS0g.js:46758:11)
    at async file:///D:/www.zichin.com/blog/node_modules/.pnpm/vitepress@1.0.1_@algolia+client-search@4.22.1_sass@1.72.0_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-C_2bYS0g.js:2614:20
✖ rendering pages...
build error:
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.B3t592Xy.js:1124:18)
    at async Object.go (file:///D:/www.zichin.com/blog/docs/.vitepress/.temp/pageviews.B3t592Xy.js:1113:5)
    at async render (file:///D:/www.zichin.com/blog/docs/.vitepress/.temp/app.js?t=1711446838791:5030:3)
    at async renderPage (file:///D:/www.zichin.com/blog/node_modules/.pnpm/vitepress@1.0.1_@algolia+client-search@4.22.1_sass@1.72.0_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-C_2bYS0g.js:46514:19)
    at async pMap.concurrency (file:///D:/www.zichin.com/blog/node_modules/.pnpm/vitepress@1.0.1_@algolia+client-search@4.22.1_sass@1.72.0_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-C_2bYS0g.js:46758:11)
    at async file:///D:/www.zichin.com/blog/node_modules/.pnpm/vitepress@1.0.1_@algolia+client-search@4.22.1_sass@1.72.0_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-C_2bYS0g.js:2614:20
 ELIFECYCLE  Command failed with exit code 1.

 *  终端进程“C:\windows\System32\WindowsPowerShell\v1.0\powershell.exe -Command pnpm run docs:build”已终止，退出代码: 1。
 *  终端将被任务重用，按任意键关闭。

问题原因

1. zrender 版本过低，需要升级到最新版本。
2. vitepress 在构建的时候会检查，语法错误

解决方案

1. 升级 zrender 版本到最新版本
2. 升级 zrender 之后若还有问题, 可以在 docs\.vitepress\config.mjs 中添加如下配置

export default defineConfig((ctx) => {
  // 兼容 echarts@5.5.0 打包报错, 判断 navigator 是否存在，不存在则赋予一个假值
  globalThis.navigator ??= {}; 
  globalThis.navigator.userAgent ??= "Node.js"; 
  return {
    lang: "zh-CN",
    title: "🇨🇳子卿全栈系列 💯",
    // 其他代码
  };
});