Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.

[HapLifeMan]

Hey, I'm creating a new module for Nuxt and when I'm adding a plugin pushing a script to the DOM, the following error is throwed in the console:

commons.app.js:8972 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
    at _loop (http://192.168.1.2:3001/_nuxt/commons.app.js:8972:18)
    at http://192.168.1.2:3001/_nuxt/commons.app.js:8976:18
    at Array.forEach (<anonymous>)
    at updateTag (http://192.168.1.2:3001/_nuxt/commons.app.js:8920:8)
    at updateClientMetaInfo (http://192.168.1.2:3001/_nuxt/commons.app.js:9085:22)
    at VueComponent.refresh (http://192.168.1.2:3001/_nuxt/commons.app.js:9119:16)
    at http://192.168.1.2:3001/_nuxt/commons.app.js:7816:25
    at http://192.168.1.2:3001/_nuxt/commons.app.js:7832:5

The plugin:

export default () => {

  if (typeof window === 'undefined')
    return

  ((t, r, u, s, b, o, x) => {

    o = r.createElement(u)
    o.async = true
    o.defer = true
    o.src = s
    x = r.getElementsByTagName('body')[0]
    x.parentNode.appendChild(o, x)

  })(window, document, 'script', '//some.script.js')

}

Is it still a bug or I'm doing something wrong? Thanks!

[pimlie]

Could you all the head functions in your components? It looks like you are returning wrongly structured metaInfo in one of those. Most metaInfo types should be an array of objects, see the docs

[HapLifeMan]

From the layout:

head () {

      const nuxtI18nSeo = this.$nuxtI18nSeo()

      return {
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.$t('_meta.description'),
          },
          {
            property: 'og:description',
            content: this.$t('_meta.description'),
          },
          {
            property: 'og:image',
            content: process.env.BASE_URL + '/img/social-' + this.$i18n.locale + '.png',
          },
          ...nuxtI18nSeo.meta,
        ],
      }

    },

From a page extending the layout:

head () {

      const nuxtI18nSeo = this.$nuxtI18nSeo()

      return {
        title: this.$t('_pg.faq.title'),
        meta: [
          {
            property: 'og:title',
            content: `${this.$t('_pg.faq.title')}`,
          },
          {
            property: 'og:url',
            content: process.env.BASE_URL + this.$route.fullPath,
          },
          ...nuxtI18nSeo.meta,
        ],
      }

    },

[pimlie]

Strange, looks good to me indeed. You dont have any residual config anywhere, eg in nuxt.config?

If not, please create a reproduction because not sure what info to ask for to debug this further.

One remark though, its strongly recommended to use string templates instead of concatenation. Eg instaed of process.env.BASE_URL + this.$route.fullPath please use `${process.env.BASE_URL}${this.$route.fullPath}`. This prevents errors if one of the vars is a number instead of a string which causes javascript to do an addition instead of a concatenation.

[HapLifeMan]

I followed the documentation, here's what it looks like:

head: {
    base: process.env.BASE_URL,
    titleTemplate: '%s • MySite',
    meta: [
      {
        'http-equiv': 'Content-Type',
        content: 'text/html; charset=utf-8',
      },
    ],
}

Another weird thing, when I switch between pages the title is blinking randomly: https://streamable.com/p9uwd, any idea about that? 🤔

Thanks for the recommendation by the way, I usually use the template string but didn't optimize this part yet 😊

[pimlie]

The blinking can happen when there is a delay between the old page component being removed and the new one being created. In nuxt there can be a measurable delay between these two.

vue-meta has an option to prevent this but you cant set this option with nuxt unfortunately. Still on the todo list to change that.

[stale]

Thanks for your contribution to vue-meta! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of vue-meta
2. Comment the steps to reproduce it
   Issues that are labeled as pending will not be automatically marked as stale.

[romucci]

Anyone know what this is about still? I cannot stop it from happening even if I remove all the head hooks!

[dubem-design]

@romucci There is probably a "," or some invalid character somewhere in your template. I removed a "," from inside the opening tag if an element and it fixed it

[danyelgithub]

@romucci There is probably a "," or some invalid character somewhere in your template. I removed a "," from inside the opening tag if an element and it fixed it

this was my problem. In my case, a "&&". Thanks!