fix: properly serialize undefined in vuex store (#3913)

* allow to serialize undefined variable in vuex store

* test properly

* fix test

* lock

lib/app/client.js

@@ -172,7 +172,7 @@ function resolveComponents(router) {
 }
 
 function callMiddleware (Components, context, layout) {
-  let midd = <%= serialize(router.middleware, { isJSON: true }) %>
+  let midd = <%= devalue(router.middleware) %>
   let unknownMiddleware = false
 
   // If layout is undefined, only call global middleware

lib/builder/builder.js

@@ -8,6 +8,7 @@ import fsExtra from 'fs-extra'
 import hash from 'hash-sum'
 import webpack from 'webpack'
 import serialize from 'serialize-javascript'
+import devalue from 'devalue'
 import MFS from 'memory-fs'
 import webpackDevMiddleware from 'webpack-dev-middleware'
 import webpackHotMiddleware from 'webpack-hot-middleware'
@@ -398,6 +399,7 @@ export default class Builder {
           const template = _.template(fileContent, {
             imports: {
               serialize,
+              devalue,
               hash,
               r,
               wp,

lib/core/renderer.js

@@ -1,7 +1,7 @@
 import path from 'path'
 import crypto from 'crypto'
 
-import serialize from 'serialize-javascript'
+import devalue from 'devalue'
 import serveStatic from 'serve-static'
 import _ from 'lodash'
 import fs from 'fs-extra'
@@ -361,9 +361,7 @@ export default class Renderer {
 
     await this.nuxt.callHook('render:routeContext', context.nuxt)
 
-    const serializedSession = `window.__NUXT__=${serialize(context.nuxt, {
-      isJSON: true
-    })};`
+    const serializedSession = `window.__NUXT__=${devalue(context.nuxt)};`
 
     const cspScriptSrcHashSet = new Set()
     if (this.options.render.csp) {

package.json

@@ -86,6 +86,7 @@
     "css-loader": "^1.0.0",
     "cssnano": "^4.0.5",
     "debug": "^4.0.1",
+    "devalue": "^1.0.4",
     "esm": "^3.0.84",
     "etag": "^1.8.1",
     "file-loader": "^2.0.0",

test/fixtures/ssr/store/index.js

@@ -3,7 +3,8 @@ import { nextId } from '@/lib/db'
 export const state = () => {
   return {
     id: nextId(),
-    id2: 0
+    id2: 0,
+    idUndefined: undefined
   }
 }
 

test/unit/basic.ssr.test.js

@@ -260,7 +260,7 @@ describe('basic ssr', () => {
 
   test('/meta', async () => {
     const { html } = await nuxt.renderRoute('/meta')
-    expect(html.includes('"meta":[{"works":true}]')).toBe(true)
+    expect(/<pre>.*&quot;works&quot;: true.*<\/pre>/s.test(html)).toBe(true)
   })
 
   test('/fn-midd', async () => {

test/unit/ssr.test.js

@@ -97,6 +97,12 @@ describe('ssr', () => {
     await uniqueTest('/fetch')
   })
 
+  test('store undefined variable response', async () => {
+    const window = await nuxt.renderAndGetWindow(url('/store'))
+    expect('idUndefined' in window.__NUXT__.state).toBe(true)
+    expect(window.__NUXT__.state.idUndefined).toEqual(undefined)
+  })
+
   test('stress test with asyncData', async () => {
     await stressTest('/asyncData')
   })

yarn.lock

@@ -2484,6 +2484,10 @@ detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
 
+devalue@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/devalue/-/devalue-1.0.4.tgz#d1f1a0e5d3799b805e1ee2d67f5c741a5d7812a7"
+
 diff@^3.2.0:
   version "3.5.0"
   resolved "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
@@ -7848,7 +7852,7 @@ vue-loader@^15.4.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-meta@^1.5.3:
+vue-meta@^1.5.4:
   version "1.5.4"
   resolved "https://registry.npmjs.org/vue-meta/-/vue-meta-1.5.4.tgz#966e37a58c0eff43411eac5894ebc6836a451744"
   dependencies: