Build failing with vue-notification package - vue.js

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! 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
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 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 ]
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.