SSR build says "document is not defined" for a Vuejs cli3 SPA app using a Vue cli3 library

You experienced this error because when the application is building process is done on the server-side where no document exists. You can append an element to document styles by finding an element with querySelector:

  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')

only when JavaScript append to the page is interpreted by the browser (no node js).

You have two options in this case:

1. Manage styling on the server-side (you can't use `document)
2. Manage styling on the client-side (you can use document)

In option 1 - server-side you will probably resign from using your vue-custom-lib package or create a fork that checks if the environment is browser or node js. Eg.:

if(process) { you are in node js }if(window) { you are in the browser - you can use the document.querySelector } 

In option 2 I recommend you check Nuxt.

You can add a package with document in head.script property in nuxt.config.js

export default {  head: {    script: [      { src: '...' }    ]  },

you should also read about detecting server and client-side in the Nuxt context

https://nuxtjs.org/api/context/

Configuration build that has also the property isServer:

https://nuxtjs.org/api/configuration-build

Appending your custom library can be done also in renderAndGetWindow function

https://nuxtjs.org/api/nuxt-render-and-get-window