Component does not support SSR (ReferenceError: document is not defined)

[lloydtao]

Error

The component does not support server-side rendering, leading to the following error:

ReferenceError 
document is not defined

node_modules\vue-snowf\dist\vue-snowf.js
i@6:4115

Config

Using Nuxt 2.14.6 with SSR.

package.json:

{
  "name": "portfolio",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "test": "jest"
  },
  "dependencies": {
    "@nuxt/content": "^1.9.0",
    "@nuxtjs/axios": "^5.12.2",
    "@nuxtjs/pwa": "^3.0.2",
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6",
    "vue-snowf": "^0.0.2",
    "webp-loader": "^0.6.0"
  },
  "devDependencies": {
    "@aceforth/nuxt-optimized-images": "^1.3.0",
    "@nuxtjs/eslint-config": "^3.1.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@nuxtjs/tailwindcss": "^3.1.0",
    "@vue/test-utils": "^1.1.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.5.0",
    "eslint": "^7.10.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.1",
    "jest": "^26.5.0",
    "prettier": "^2.1.2",
    "sqip-loader": "^1.0.0",
    "vue-jest": "^3.0.4"
  }
}

Setting ssr: false in nuxt.config.js fixes this completely, so it must be an SSR thing.

Similar document is not defined issue related to SSR:

• ReferenceError: document is not defined nuxt/nuxt#245

[vrusua]

@lloydtao @Fuxy526
Hi guys, did you have a chance to fix this for Nuxt/SSR, or? Thanks!

[Amantura]

---

/plugins/snowf.js

import Vue from 'vue'
import snowf from 'snowf'

Vue.prototype.$snowf = snowf

---

nuxt.config.js

plugins: [
{
src: '@/plugins/snowf.js',
ssr: false
}
]

---

use:

this.$snowf.init({
size: 3,
amount: 200,
zIndex: 50,
wind: 1
})

i use liblary snowf.js, not vue-snowf.js