Vuepress: 在引用过外部组件后运行vuepress build docs 报错

[heifengli001]

• [ ] I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

What is expected?

解决这个错误。

What is actually happening?

我使用vuepress 来构建前端的一个API文档，需要引入其他组件。
我在使用过程中，执行 vuepress dev docs 预览的时候，不会有问题。
完成工作后，执行 build 命令报错
错误详细如下：

D:\mypath>vuepress build docs
wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...

√ Client
  Compiled successfully in 20.35s

√ Server
  Compiled successfully in 9.31s

wait Rendering static HTML...
Rendering page: /error Error rendering /: false
undefined
ReferenceError: navigator is not defined
    at userAgent (node_modules/vue-component/dist/newplant-vue-component.common.js:66037:0)
    at Module.fb15 (node_modules/vue-component/dist/newplant-vue-component.common.js:66042:0)
    at __webpack_require__ (node_modules/vue-component/dist/newplant-vue-component.common.js:65:0)
    at server-bundle.js:1367:18
    at Object.<anonymous> (node_modules/vue-component/dist/newplant-vue-component.common.js:200:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module.<anonymous> (server-bundle.js:81279:37)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Object.<anonymous> (server-bundle.js:79273:18)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at server-bundle.js:118:18
    at Object.<anonymous> (server-bundle.js:121:10)
    at evaluateModule (D:\Program Files\nodejs\node_modules\vuepress\node_modules\[email protected]@vue-server-renderer\build.dev.js:9303:21)
    at D:\Program Files\nodejs\node_modules\vuepress\node_modules\[email protected]@vue-server-renderer\build.dev.js:9361:18
    at new E (D:\Program Files\nodejs\node_modules\vuepress\node_modules\[email protected]@envinfo\dist\envinfo.js:1:7623)
    at D:\Program Files\nodejs\node_modules\vuepress\node_modules\[email protected]@vue-server-renderer\build.dev.js:9353:14
    at Object.renderToString (D:\Program Files\nodejs\node_modules\vuepress\node_modules\[email protected]@vue-server-renderer\build.dev.js:9529:9)
    at Build.renderPage (D:\Program Files\nodejs\node_modules\vuepress\node_modules\_@[email protected]@@vuepress\core\lib\node\build\index.js:156:34)
    at Build.render (D:\Program Files\nodejs\node_modules\vuepress\node_modules\_@[email protected]@@vuepress\core\lib\node\build\index.js:94:33)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Other relevant information

• Output of npx vuepress info in my VuePress project:

vuepree 版本

D:\mypath>vuepress -v
cli.js/1.0.2 win32-x64 node-v10.3.0

系统环境如下：

Environment Info:
  System:
    OS: Windows 7
    CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1230 v5 @ 3.40GHz
  Binaries:
    Node: 10.3.0 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.13.0 - D:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.10.1 - D:\Program Files\nodejs\npm.CMD
  npmPackages:
    @vuepress/core:  1.0.2
    @vuepress/theme-default:  1.0.2
    vuepress: ^1.0.2 => 1.0.2
  npmGlobalPackages:
    vuepress: Not Found

[ulivz]

See Browser API Access Restrictions.

[heifengli001]

我给各个标签增加了 但是还是没用，哭唧唧

[546200350]

我也遇到这个问题，我这边解决办法是：
将原生DOM API调用得第三方库，放到mounted后引入
比如：我icon组件引用了iconfont的js, 然后把这个js放到icon.vue 的mounted方法下引入 import('../iconfont.js');

[qinzitong]

可以这么解决：我的vuepress版本是1.3.0
enhanceApp.js

import "xxx/lib/index.css"
export default ({
  Vue, // VuePress 正在使用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 当前应用的路由实例
  siteData, // 站点元数据
  isServer // 当前应用配置是处于 服务端渲染 或 客户端
}) => {
  if(!isServer){
    import('xxx/lib/xxxx.min.js').then(module => {
      Vue.use(module)
    })    
  }
}

[Goodbye-Youth]

可以这么解决：我的vuepress版本是1.3.0
enhanceApp.js

import "xxx/lib/index.css"
export default ({
  Vue, // VuePress 正在使用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 当前应用的路由实例
  siteData, // 站点元数据
  isServer // 当前应用配置是处于 服务端渲染 或 客户端
}) => {
  if(!isServer){
    import('xxx/lib/xxxx.min.js').then(module => {
      Vue.use(module)
    })    
  }
}

找了好多方法，就你这个有用 :smile:

[mohong]

可以这么解决：我的vuepress版本是1.3.0
enhanceApp.js

import "xxx/lib/index.css"
export default ({
  Vue, // VuePress 正在使用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 当前应用的路由实例
  siteData, // 站点元数据
  isServer // 当前应用配置是处于 服务端渲染 或 客户端
}) => {
  if(!isServer){
    import('xxx/lib/xxxx.min.js').then(module => {
      Vue.use(module)
    })    
  }
}

该组件库中的组件在markdown文件中被使用时有报错，说未注册该组件。。
执行顺序好像是先被使用，然后才注册成功，所以报错了，这个情况有解决办法吗？

[qinzitong]

可以这么解决：我的vuepress版本是1.3.0
enhanceApp.js

import "xxx/lib/index.css"
export default ({
  Vue, // VuePress 正在使用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 当前应用的路由实例
  siteData, // 站点元数据
  isServer // 当前应用配置是处于 服务端渲染 或 客户端
}) => {
  if(!isServer){
    import('xxx/lib/xxxx.min.js').then(module => {
      Vue.use(module)
    })    
  }
}

该组件库中的组件在markdown文件中被使用时有报错，说未注册该组件。。
执行顺序好像是先被使用，然后才注册成功，所以报错了，这个情况有解决办法吗？

这里主要解决的问题是 build的时候 ，服务端渲染的问题。