Nuxt.js: bug on nested routes with vue-meta on .10.x release

[dohomi]

Hello,
I see following error on the server side and then NUXT is shutting down:

/data/vuejs/students-admin/node_modules/vue-meta/lib/vue-meta.js:824
    var htmlTag = document.getElementsByTagName('html')[0];
                  ^

ReferenceError: document is not defined
    at updateClientMetaInfo (/data/example-project/node_modules/vue-meta/lib/vue-meta.js:824:19)
    at Vue$2.refresh (/data/example-project/node_modules/vue-meta/lib/vue-meta.js:885:35)
    at /data/example-project/node_modules/vue-meta/lib/vue-meta.js:1007:74
    at Timeout._onTimeout (/data/example-project/node_modules/vue-meta/lib/vue-meta.js:924:5)
    at ontimeout (timers.js:365:14)
    at tryOnTimeout (timers.js:237:5)
    at Timer.listOnTimeout (timers.js:207:5)

_{This question is available on Nuxt.js community (#c390)}

[dohomi]

Steps to reproduce:

• /client => renders OK
• /client/clientId/base => renders OK (click on router link)
• /client/clientId/base => page reload => throws above error and server stops

There seems to be an error while loading a nested child element on server start.

[alexchopin]

Hi @dohomi , I can't reproduce your issue.
Can you explain/show us more about your code?
Where are you using head property?

[dohomi]

I do not use any head specific code. My project structure is looking like this:

All pages are working normally, only the nested base,booking,contact... are broken on page reload. It was working before the upgrade.

[alexchopin]

That's weird, I still can't reproduce it.
Can you try again to reinstall your node_modules?

[dohomi]

@alexchopin I removed the node_models folder without success. Here a bit more of my _id.vue setup:

<template>
<div>
(some navigation content)
</div>
<nuxt-child :model="model"/>

</template>
<script>
(...)
   apollo: {
            query: {
                variables(){
                    return {
                        id: this.$route.params.id
                    };
                },
                query: Client,
                update: ({Client}) => ({client: Client}),
                result({Client}) {
                    this.model = Object.assign({}, this.model, Client);
                }
            }
        }

</script>

If I wrap the nuxt-child like this

<template v-if="false">
<nuxt-child :model="model"/>
</template>

It works, but then I don't have the model context inside of my child routes. So I'm bit confused if this is the wrong structure of my code?

As the prop model in the nuxt-child does not seem to have the context immediately because it needs to get the apollo request on SSR it seems to break NUXT now. Any idea how to solve this conflict?

[alexchopin]

Have you tried to use the store instead of model?

[dohomi]

Not yet.. I will try this tomorrow. My question is: can I pass the model to the nuxt-child like how I did it in my example?
<nuxt-child :model="model"/>
If not I will use vuex to archive that.. Will report tomorrow if its successful

[dohomi]

I tried to split my logic into vuex but it feels a little troubled.. because with the use of vue-apollo the whole simplified logic will become quite complicated. This is the server output just when vue-meta breaks:

{ title: '',
  titleChunk: '',
  titleTemplate: '%s',
  htmlAttrs: {},
  bodyAttrs: {},
  meta: [],
  base: [],
  link: [],
  style: [],
  script: [],
  noscript: [],
  __dangerouslyDisableSanitizers: [] } { keyName: 'head',
  attribute: 'data-n-head',
  ssrAttribute: 'data-n-head-ssr',
  tagIDKeyName: 'hid' }

In my opinion this code should never being triggered. Any idea what could cause this?

UPDATE: the error does not appear on the deployed server. It seems to happen in development mode only..

[JiriChara]

@dohomi, @alexchopin I am having the same issue, but it only seems to happen when I add some field validations using https://github.com/monterail/vuelidate

This works fine:

export default {
    head: {
      title: 'Login'
    },

    data() {
      return {
        email: '',
        password: ''
      };
    },
   //---
};

,but following code throws error:

export default {
    head: {
      title: 'Login'
    },

    data() {
      return {
        email: '',
        password: ''
      };
    },

    validations: {
      email: {
         required: true
      }
    }
   //---
};

/home/jiri/Projects/chara.vip/node_modules/vue-meta/lib/vue-meta.js:824
    var htmlTag = document.getElementsByTagName('html')[0];
                                                       ^

ReferenceError: document is not defined
    at updateClientMetaInfo (/home/jiri/Projects/chara.vip/node_modules/vue-meta/lib/vue-meta.js:824:56)
    at Vue$2.refresh (/home/jiri/Projects/chara.vip/node_modules/vue-meta/lib/vue-meta.js:885:35)
    at /home/jiri/Projects/chara.vip/node_modules/vue-meta/lib/vue-meta.js:1007:74
    at Timeout._onTimeout (/home/jiri/Projects/chara.vip/node_modules/vue-meta/lib/vue-meta.js:924:5)
    at tryOnTimeout (timers.js:232:11)
    at Timer.listOnTimeout (timers.js:202:5)

[dohomi]

@JiriChara interesting, I am using vuelidate as well. So you are right, after removing the validation rules the error seems to be gone

[PierreRambaud]

Hi guys,

Downgrading to Vue-meta 0.5.5 fix the problem. I'm having the same issue without using validations.

Regards

[JiriChara]

I am using [email protected] and still having the issue

[wushan]

same error but I am not using any nested router yet.

update: After some tests, the problem comes from vuex-router-sync plugin, after remove that everything seems nice.

[tforssander]

Same issue here after installing vuex-router-sync (by following the steps by @Atinux in #213. Removing the plugin fixes it.

[dohomi]

Its kind of weird, nested routes seem to work after page-reload again but not on initial routing. What is bugging me most is that there isn't any error thrown, the page just simply stays blank.. It might be related to vue-apollo though..

[JiriChara]

@dohomi it is only failing when the page is rendered on the server, because document is not defined there. Only the initial load is rendered on the server

[guumaster]

(I'll add the comment here too, as this issue is still opened)

The vuex-router-sync plugin solution that @Atinux propose on #213 makes dev/prod server crash on every page reload. I'm getting this error:

/my_nuxt_app_path/node_modules/vue-meta/lib/vue-meta.js:824
    var htmlTag = document.getElementsByTagName('html')[0];
                  ^

ReferenceError: document is not defined
    at updateClientMetaInfo (/my_nuxt_app_path/node_modules/vue-meta/lib/vue-meta.js:824:19)
    at Vue$2.refresh (/my_nuxt_app_path/node_modules/vue-meta/lib/vue-meta.js:885:35)
    at /my_nuxt_app_path/node_modules/vue-meta/lib/vue-meta.js:1013:74
    at Timeout._onTimeout (/my_nuxt_app_path/node_modules/vue-meta/lib/vue-meta.js:924:5)
    at ontimeout (timers.js:380:14)
    at tryOnTimeout (timers.js:244:5)
    at Timer.listOnTimeout (timers.js:214:5)

My route is also nested: /something/_slug/_id, and it works again if I remove the plugin plugins/vue-router-sync.js from the list.

[guumaster]

I've fixed it by using vue-router-sync only on client side, update plugin config like this:

// nuxt.config.js
   plugins: [
      ....
     { src: '~plugins/vuex-router-sync.js', ssr: false }
   ]

[corsen2000]

Also running into this issue. We are not using vue-router-sync. Seems likely related to vue-meta issue, but unfortunately issue has been opened for some time.

Does anyone have a work around?

[corsen2000]

Did a little digging and found both vue-router-sync and our code was making use of store.registerModule. I think anyone using that function directly or indirectly may run into this issue.

https://github.com/declandewet/vue-meta/issues/82#issuecomment-300241412

[jazoom]

A PR with a fix has been pending for a month now over in vue-meta, just waiting for a maintainer to pull it:

https://github.com/declandewet/vue-meta/issues/82

[Atinux]

Should be fixed in the upcoming version of Nuxt.js

[Atinux]

Closing since rc3 is out :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.