Is SSR possible with Element UI? ReferenceError: document is not defined

[AnnaBova19]

Element UI version "element-ui": "^2.10.1"

OS/Browsers version Linux, Chrome

Vue version "vue": "2.*"

I have a project Laravel & Vue.js. We are using Element UI. We want SSR to make our application SEO friendly. I've followed the documentation of Vue SSR. But I have some problems with Element UI. after running npm run dev I got the next errors:

The command "/usr/bin/node /home/vagrant/project/storage/app/ssr/af5506b02d5fc2d0c85ea38dba994c7a.js" failed. Exit Code: 1(General error) Working directory: /home/vagrant/project/public Output: ================ Error Output: ================ /home/vagrant/project/storage/app/ssr/af5506b02d5fc2d0c85ea38dba994c7a.js:419728 !function(e,t){ true?module.exports=t(__webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.js")):undefined}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function i(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){ ReferenceError: document is not defined at Module.<anonymous> (/home/vagrant/project/storage/app/ssr/af5506b02d5fc2d0c85ea38dba994c7a.js:419728:71812) at i (/home/vagrant/project/storage/app/ssr/af5506b02d5fc2d0c85ea38dba994c7a.js:419728:278) at Object.<anonymous> (/home/vagrant/project/storage/app/ssr/af5506b02d5fc2d0c85ea38dba994c7a.js:419728:22890) at i (/home/vagrant/project/storage/app/ssr/af5506b02d5fc2d0c85ea38dba994c7a.js:419728:278) at /home/vagrant/project/storage/app/ssr/af5506b02d5fc2d0c85ea38dba994c7a.js:419728:1083 at /home/vagrant/project/storage/app/ssr/af5506b02d5fc2d0c85ea38dba994c7a.js:419728:1093 at ./node_modules/element-ui/lib/index.js (/home/vagrant/project/storage/app/ssr/af5506b02d5fc2d0c85ea38dba994c7a.js:419728:37) at Object../node_modules/element-ui/lib/index.js (/home/vagrant/project/storage/app/ssr/af5506b02d5fc2d0c85ea38dba994c7a.js:419728:115) at __webpack_require__ (/home/vagrant/project/storage/app/ssr/af5506b02d5fc2d0c85ea38dba994c7a.js:22:30) at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/atoms/button/index.vue?vue&type=script&lang=js& (/home/vagrant/project/storage/app/ssr/af5506b02d5fc2d0c85ea38dba994c7a.js:318829:72) (View: /home/vagrant/project/resources/views/landing.blade.php)

package.json

{
    "dependencies": {
        "@progress/kendo-scheduler-vue-wrapper": "^2020.1.115",
        "@progress/kendo-theme-default": "^4.12.1",
        "@progress/kendo-ui": "^2020.1.115",
        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
        "@vue/babel-preset-jsx": "^1.0.0",
        "axios": "^0.19",
        "bootstrap": "^4.1.1",
        "chart.js": "^2.8.0",
        "cookie": "^0.4.0",
        "cross-env": "^5.1",
        "element-ui": "^2.10.1",
        "jquery": "^3.2",
        "js-cookie": "^2.2.1",
        "laravel-echo": "^1.7.0",
        "laravel-mix": "^5.0.1",
        "laravel-mix-alias": "^1.0.2",
        "lodash": "^4.17.4",
        "moment": "^2.10.6",
        "moment-timezone": "^0.5.27",
        "popper.js": "^1.12",
        "promise": "^7.1.1",
        "public-ip": "^4.0.0",
        "pusher-js": "^5.1.1",
        "recordrtc": "^5.5.8",
        "rtlcss": "^2.2",
        "socket.io-client": "^2.3.0",
        "sweetalert": "^1.1.3",
        "twilio": "^3.39.5",
        "twilio-video": "^1.20.1",
        "urijs": "^1.17.0",
        "v-mask": "^2.0.2",
        "vee-validate": "^2.2.13",
        "videojs": "^1.0.0",
        "videojs-record": "^3.8.0",
        "vue": "2.*",
        "vue-add-to-calendar": "^1.0.4",
        "vue-audio-recorder": "^3.0.1",
        "vue-backtotop": "^1.6.1",
        "vue-chartjs": "^3.4.2",
        "vue-clickaway2": "^2.3.1",
        "vue-clipboard2": "^0.3.1",
        "vue-cropper": "^0.5.2",
        "vue-fragment": "^1.5.1",
        "vue-i18n": "^8.11.2",
        "vue-input-tag": "^2.0.6",
        "vue-jsonld": "^1.0.1",
        "vue-meta": "^2.3.3",
        "vue-moment": "^4.0.0",
        "vue-no-ssr": "^1.1.1",
        "vue-numeric": "^2.3.0",
        "vue-picture-input": "^2.1.6",
        "vue-router": "^3.0.7",
        "vue-server-renderer": "^2.6.10",
        "vue-social-sharing": "^2.4.7",
        "vue-styled-components": "^1.4.5",
        "vue-video-player": "^5.0.2",
        "vue2-google-maps": "^0.10.7",
        "vuex": "^3.1.1",
        "vuex-persistedstate": "^2.7.0"
    },
    "devDependencies": {
        "@babel/core": "^7.4.5",
        "@mdi/font": "^3.7.95",
        "@storybook/addon-actions": "^5.1.9",
        "@storybook/addon-backgrounds": "^5.1.9",
        "@storybook/addon-links": "^5.1.9",
        "@storybook/addon-storysource": "^5.1.9",
        "@storybook/addon-viewport": "^5.1.9",
        "@storybook/addons": "^5.1.9",
        "@storybook/vue": "^5.1.9",
        "@vue/test-utils": "^1.0.0-beta.29",
        "autoprefixer": "^7.1.6",
        "babel-jest": "^24.8.0",
        "babel-loader": "^8.0.6",
        "babel-plugin-component": "^1.1.1",
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "babel-preset-vue": "^2.0.2",
        "css-loader": "^3.0.0",
        "element-theme": "^2.0.1",
        "element-theme-chalk": "^2.10.1",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "jest": "^24.8.0",
        "jest-serializer-vue": "^2.0.2",
        "resolve-url-loader": "2.3.1",
        "sass": "^1.22.3",
        "sass-loader": "7.*",
        "storybook-addon-jsx": "^7.1.2",
        "style-loader": "^0.23.1",
        "util": "^0.12.1",
        "vue-jest": "^3.0.4",
        "vue-loader": "^15.7.0",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^4.35.3",
        "webpack-node-externals": "^1.7.2"
    },
    "jest": {
        "moduleFileExtensions": [
            "js",
            "json",
            "vue"
        ],
        "transform": {
            ".*\\.(vue)$": "vue-jest",
            "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
        },
        "moduleNameMapper": {
            "^@/(.*)$": "<rootDir>/resources/$1"
        },
        "collectCoverage": true,
        "collectCoverageFrom": [
            "<rootDir>/resources/**/*.{js,vue}",
            "!**/node_modules/**"
        ],
        "coverageReporters": [
            "html",
            "text-summary"
        ],
        "snapshotSerializers": [
            "jest-serializer-vue"
        ]
    }
}

Please, help!!!

What is Expected? Element UI to be friendly with SSR

What is actually happening? The SSR failed because of the errors at ./node_modules/element-ui/lib/index.js

[AugmentBLU]

Just been looking in to this myself today and have the same issues.

Did you manage to fix?

[iamkun]

a reproduction demo, please?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.