Build failing with vue-notification package

Question

I'm working on a project with vuepress and the vue-notification package. Everything is ok when I run the project locally with the vuepress dev command.

However, I get this error message when build the project:

> 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! [email protected] build: `vuepress build docs`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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

This is the content of the log file

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~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 [email protected]~build: CWD: /home/joao/test-vuepress-notification
10 silly lifecycle [email protected]~build: Args: [ '-c', 'vuepress build docs' ]
11 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] build: `vuepress build docs`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

And this is the information on my environment

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

The repository that I have used to reproduce the error is available in https://github.com/joaohis/vuepress-vue-notification-issue

Am I importing and injecting the vue-notification package correctly?

Do vuepress and vue-notification are not compatible?

Thank you.

Answer 1

With the help of a colleague in Reddit, I figured out that this is a problem with server-side rendering. To cope with it, I have followed the vue-notification documentation resulting in this enhanceApp.js file

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)
    })
  }
}

Now I can build the project without any problem.