diff --git a/packages/vue-app/template/mixins/fetch.server.js b/packages/vue-app/template/mixins/fetch.server.js index 01bfff80e3..9257031520 100644 --- a/packages/vue-app/template/mixins/fetch.server.js +++ b/packages/vue-app/template/mixins/fetch.server.js @@ -1,5 +1,5 @@ import Vue from 'vue' -import { hasFetch, normalizeError, addLifecycleHook } from '../utils' +import { hasFetch, normalizeError, addLifecycleHook, purifyData } from '../utils' async function serverPrefetch() { if (!this._fetchOnServer) { @@ -26,7 +26,7 @@ async function serverPrefetch() { attrs['data-fetch-key'] = this._fetchKey // Add to ssrContext for window.__NUXT__.fetch - this.$ssrContext.nuxt.fetch.push(this.$fetchState.error ? { _error: this.$fetchState.error } : this._data) + this.$ssrContext.nuxt.fetch.push(this.$fetchState.error ? { _error: this.$fetchState.error } : purifyData(this._data)) } export default { diff --git a/packages/vue-app/template/utils.js b/packages/vue-app/template/utils.js index bfb644afb1..e4c45059b3 100644 --- a/packages/vue-app/template/utils.js +++ b/packages/vue-app/template/utils.js @@ -25,6 +25,24 @@ export function interopDefault (promise) { export function hasFetch(vm) { return vm.$options && typeof vm.$options.fetch === 'function' && !vm.$options.fetch.length } +export function purifyData(data) { + if (process.env.NODE_ENV === 'production') { + return data + } + + return Object.entries(data).filter( + ([key, value]) => { + const valid = !(value instanceof Function) && !(value instanceof Promise) + if (!valid) { + console.warn(`${key} is not able to be stringified. This will break in a production environment.`) + } + return valid + } + ).reduce((obj, [key, value]) => { + obj[key] = value + return obj + }, {}) +} export function getChildrenComponentInstancesUsingFetch(vm, instances = []) { const children = vm.$children || [] for (const child of children) {