SSR mode not works in NuxtJS (mode: 'universal')

[leaderit]

Errors in SSR mode:

SyntaxError Unexpected token '<'

in SPA - all works

I got message:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.

when using the form in ssr

        <v-form-base 
            :model="model" 
            :schema="schema" 
            @input="handleInput"
        />

data: () =>({ dialog: true, item_idx: -1, item: { date: '', name: 'My Name', },
schema: { date: { type: 'date', ext:'text', locale:'ru', label: 'Дата' },
name: { type: 'text', label: 'Имя' }, }, }),

Error somwere in:

flattenObjects()

because after i commented body of the function all start works on SSR, but incorrectly (no form), after i uncommenter the fuction and nuxt updated page on client side ONLY form was shown Then i update page in browser (reread from server) - error comes back

error messages

pages/test.js:1340:63 vFormBase.vue:905: VueComponent.flattenObjects vFormBase.vue:941: VueComponent.flattenAndCombineToArray vFormBase.vue:964: VueComponent.rebuildArrays vFormBase.vue:969: VueComponent.created

[leaderit]

I found: module not works in SSR because this string in flattenObjects (dat, sch):

// const notInstanceOfFileObject = !(dat[key] instanceof File)

    const notInstanceOfFileObject = true //!(dat[key] instanceof File)

i will look more about reasons later

[leaderit]

FIX THE PROBLEM on NuxtJS SSR: change code to

 if ( !process.server) {
      const notInstanceOfFileObject = !(dat[key] instanceof File)
 }

or

 if (process.client) {
      const notInstanceOfFileObject = !(dat[key] instanceof File)
 }

pls check on other enviroments and update code

[wotamann]

I personally have no experience with NUXT JS. I will try to check it and if necessary update the code. If anyone has experience with NUXT JS Help would be appreciated.

Thanks for your contribution and suggestion

[leaderit]

I personally have no experience with NUXT JS. I will try to check it and if necessary update the code.

It's possible to get same error in vuejs SSR mode packge, as in https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer

[sapyx]

any news?

[pooyagolchian]

For Nuxt.js, I test for SSR and solved this issue: You should use the 'v-mask' package and import the main component file in the vuetify-form-base package.

You should export this package in a plugin like as below: Vue.component('VueMask', () => import('v-mask'))

after that add the main file component to your project:

https://github.com/wotamann/vuetify-form-base/blob/master/dist/src/vFormBase.vue

Alternative solution:

You can use the https://www.npmjs.com/package/vuetify-form-base-ssr package.

[epiphanatic]

@pooyagolchian thanks for this. Btw, I don't know if it is just because I'm using typescript but I had to import like this import VuetifyFormBaseSsr from 'vuetify-form-base-ssr/src/vuetify-form-base-ssr.vue' not this import VuetifyFormBaseSsr from 'vuetify-form-base-ssr'

[pooyagolchian]

@epiphanatic Thanks for your reply and use this package. I will fix it in my documentation.