使用 vue-notification 包构建失败

Question

我正在开发一个带有 vuepress 和 vue-notification 包的项目。当我使用vuepress dev 命令在本地运行项目时，一切正常。

但是，我在构建项目时收到此错误消息：

> 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 9.57s

✔ Server
  Compiled successfully in 6.32s

wait Rendering static HTML...
error Error rendering /: false
undefined
error Error rendering /404.html: false
undefined
ReferenceError: document is not defined
    at addStyle (node_modules/vue-notification/dist/index.js:1019:0)
    at addStylesToDom (node_modules/vue-notification/dist/index.js:1003:0)
    at module.exports (node_modules/vue-notification/dist/index.js:957:0)
    at Object.<anonymous> (node_modules/vue-notification/dist/index.js:898:0)
    at __webpack_require__ (node_modules/vue-notification/dist/index.js:30:0)
    at Object.<anonymous> (node_modules/vue-notification/dist/index.js:204:0)
    at __webpack_require__ (node_modules/vue-notification/dist/index.js:30:0)
    at Object.<anonymous> (node_modules/vue-notification/dist/index.js:154:0)
    at __webpack_require__ (node_modules/vue-notification/dist/index.js:30:0)
    at server-bundle.js:6487:18
    at server-bundle.js:6490:10
    at webpackUniversalModuleDefinition (node_modules/vue-notification/dist/index.js:3:0)
    at Object.<anonymous> (node_modules/vue-notification/dist/index.js:10:1)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module.<anonymous> (server-bundle.js:13363:12)
    at __webpack_require__ (webpack/bootstrap:25:0)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-vuepress-notification@1.0.0 build: `vuepress build docs`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the test-vuepress-notification@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/joao/.npm/_logs/2021-04-13T13_35_49_588Z-debug.log

这是日志文件的内容

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build' ]
2 info using npm@6.14.12
3 info using node@v14.16.1
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle test-vuepress-notification@1.0.0~prebuild: test-vuepress-notification@1.0.0
6 info lifecycle test-vuepress-notification@1.0.0~build: test-vuepress-notification@1.0.0
7 verbose lifecycle test-vuepress-notification@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle test-vuepress-notification@1.0.0~build: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/joao/test-vuepress-notification/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/local/games:/usr/games
9 verbose lifecycle test-vuepress-notification@1.0.0~build: CWD: /home/joao/test-vuepress-notification
10 silly lifecycle test-vuepress-notification@1.0.0~build: Args: [ '-c', 'vuepress build docs' ]
11 silly lifecycle test-vuepress-notification@1.0.0~build: Returned: code: 1  signal: null
12 info lifecycle test-vuepress-notification@1.0.0~build: Failed to exec build script
13 verbose stack Error: test-vuepress-notification@1.0.0 build: `vuepress build docs`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid test-vuepress-notification@1.0.0
15 verbose cwd /home/joao/test-vuepress-notification
16 verbose Linux 4.19.0-16-amd64
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "build"
18 verbose node v14.16.1
19 verbose npm  v6.14.12
20 error code ELIFECYCLE
21 error errno 1
22 error test-vuepress-notification@1.0.0 build: `vuepress build docs`
22 error Exit status 1
23 error Failed at the test-vuepress-notification@1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

这是关于我的环境的信息

Environment Info:

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Node: 14.16.0 - /usr/bin/node
    Yarn: Not Found
    npm: 6.14.11 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @vuepress/core:  1.8.2
    @vuepress/theme-default:  1.8.2
    vuepress: ^1.8.2 => 1.8.2
  npmGlobalPackages:
    vuepress: Not Found

我用来重现错误的存储库位于https://github.com/joaohis/vuepress-vue-notification-issue

我是否正确导入和注入了 vue-notification 包？

vuepress 和 vue-notification 不兼容吗？

谢谢。

Answer 1

在 Reddit 同事的帮助下，我发现这是服务器端渲染的问题。为了应对它，我遵循了vue-notification documentation 导致了这个enhanceApp.js 文件

import Notifications from 'vue-notification/dist/ssr.js'

export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData, // site metadata
  isServer // is this enhancement applied in server-rendering or client
}) => {
  Vue.use(Notifications)

  // Import the conventional module for client-side render
  if (!isServer) {
    import('vue-notification/dist/index.js').then(module => {
      Vue.use(module)
    })
  }
}

现在我可以毫无问题地构建项目了。