Failed to render Vue app on SSR

2
votes

I've been following this guideline to learn about creating SSR Vue App. https://ssr.vuejs.org/

here is my npm scripts

"clean": "rimraf ./dist",
"start": "node .",
"build:client": "NODE_ENV=production webpack --config webpack/client.js --progress --hide-modules",
"build:server": "NODE_ENV=production webpack --config webpack/server.js --progress --hide-modules",
"build": "yarn clean; yarn build:client; yarn build:server"

It's failed if run "npm run build; npm run start".

Here is the error if I visit localhost:8000 on my browser:

ReferenceError: document is not defined
at promises.push.installedCssChunks.(anonymous function).Promise.then.installedCssChunks.(anonymous function) (webpack/bootstrap:52:0)
at new Promise (<anonymous>)
at Function.requireEnsure [as e] (webpack/bootstrap:49:0)
at component (src/router.js:10:36)
at /Users/admin.hoa.nguyen/Demos/vue-ssr/node_modules/vue-router/dist/vue-router.common.js:1778:17
at /Users/admin.hoa.nguyen/Demos/vue-ssr/node_modules/vue-router/dist/vue-router.common.js:1805:66
at Array.map (<anonymous>)
at /Users/admin.hoa.nguyen/Demos/vue-ssr/node_modules/vue-router/dist/vue-router.common.js:1805:38
at Array.map (<anonymous>)
at flatMapComponents (/Users/admin.hoa.nguyen/Demos/vue-ssr/node_modules/vue-router/dist/vue-router.common.js:1804:26)

ReferenceError: document is not defined at promises.push.installedCssChunks.(anonymous function).Promise.then.installedCssChunks.(anonymous function) (webpack/bootstrap:52:0) at new Promise ()

But if I change NODE_ENV=development for server bundle build, it's ok.

I've pushed all my code here: https://github.com/hoanguyen311/vue-ssr

3
vue.jsvue-routerserver-side-rendering
Even I am facing same problem, any solution? - Saras Arya
Same problem, spent quite some time googling and looking around but no solution... :( - StateOfTheArtJonas

3 Answers

3
votes

I use jsDom and it works. document is not defined in node environment. here is the code:

    const { JSDOM } = require('jsdom'); // document undefined
    const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', { 'url': 'http://localhost:9528' });
    if (typeof window === 'undefined') {
      global.window = dom.window;
      global.document = window.document;
      global.navigator = window.navigator;
    }

I put them in server.js.

0
votes

I met exactly the same error as yours, something wrong in vue-router, then I thought its because there is no document or window in node environment, so I tried to use jsdom , and it worked , there is no error like document is not defined anymore, but I still could not see my page on production environment. so I tried to figure out what's wrong on my router. it turned out I should not use lazy load which is recommended by the ssr.vuejs.org so here is what I did and my project just works well now.

0
votes

This error appears because in your webpack production build you have used ExtractTextPlugin

{
  test: /\.scss$/,
  use: isProd
  ? [ExtractTextPlugin.loader, 'css-loader', 'sass-loader']
  : ['vue-style-loader', 'css-loader', 'sass-loader']
},

And you in-template styles in your Foo.vue file.

// Foo.vue
<style lang="scss" scoped>
  h1 {
    color: #FFF;
    background: brown;
  }
</style>

I have faced same issue and I spent couple of days to make it work within our webpack setup. But I have failed with success :p. Now we have moved all of our in-template styles in .css/.scss files.