Updating to v2.x: meta.inject() in SSR HTML is undefined

I've read the "Migration Guide" parts of the changelogs, but couldn't find anything that points me in the right direction:

When I upgrade to version 2.x, the server side rendering of my app fails.
1.) I get the warning "This vue app/component has no vue-meta configuration"
2.) I get the Error: "TypeError: Cannot read property 'title' of undefined" (this comes from my HTML file where I use {{{meta.inject().title.text()}}} - meta.inject() seems to be undefined.

This is a part of my entry_server.js:

export default context => {
	return new Promise((resolve, reject) => {
		createApp().then(data => {
			context.meta = data.app.$meta();
...

Is there anything else that changed and needs to be modified?
Unfortunately it's not easy to prepare a minimal app to isolate the error, but perhaps others have had this problem when upgrading their SSR app, too and can give me a hint.

Thank you!

[pimlie]

Thanks for the report, could you maybe create a reproduction using the ssr example? https://github.com/nuxt/vue-meta/blob/master/examples/ssr

[webjohnjiang]

+1. upgrade to 2.0.2 from 1.5.6. My code is not change, but get the error:

This vue app/component has no vue-meta configuration

when do render by the vue-server-render, it get:

TypeError: Cannot read property 'meta' of undefined

@pimlie I created a basic public repository of my stripped down application:
https://github.com/diff-dennis/vue-meta-test

Please let me know if this helps somehow. It worked in versions 1.x and I could not find anything in the changelog / migration notes that tells me what to change.

[pimlie]

Thanks for the quick repro. It seems to be caused by this check: https://github.com/nuxt/vue-meta/blob/master/src/server/%24meta.js#L17

This check was added to provide an early exit if no metaInfo was defined on the app, but I missed your use-case where you call this method before the app has been initiated. Will revert this change for the server plugin, I think it should still be fine client-side.

@pimlie Thank you very much!

[pimlie]

I still need to add a proper test-case for this use-case, but in the mean time please check v2.0.3 which has the check removed.

@pimlie This seems to work, thanks again!

[pimlie]

@cuiyongjian If it doesnt work for you, let me know and I will reopen the issue. Thanks

[sneko]

In case it can help:

I had this error because I have some views without any meta so when rendering with:

{{{ meta.inject().meta.text() }}}

I was getting TypeError: Cannot read property 'text' of undefined.

It has been fixed by adding to my root component an empty meta object:

{
    name: 'Application',
    components: {
      ...
    },
    metaInfo: {},
}

😃

[ArosPrince]

I have this problem as well and it happens only on Windows, which is quite weird. The browser doesn't matter, but it's Windows that matters.

In my case filling in metaInfo for the root component doesn't help because the problem is with the inject() function itself.

At the beginning it returns the object containing the above mentioned title, meta, style and other objects with that text() function.

However, if I go to the address bar and change the route manually to some other page, the inject() function returns an empty object, so having metaInfo in the root component doesn't help as that stuff will be undefined anyway.

Any ideas why would inject() return an empty object, and only on Windows? On Ubuntu or MacOS this works well.

    context.meta = app.$meta()

    context.appendHtml = () => {
      const {
        title,
        style,
        meta
      } = context.meta.inject() // this will return {} at some point

      return {
        head: `
          ${meta.text()}
          ${title.text()}
          <style data-vue-meta="vuetify" id="vuetify-theme-stylesheet" type="text/css" nonce="undefined"> ${vuetifyStyles}</style>
          ${style.text()}
          `
      }

vue-meta version is 2.4.0

//Edit I suspect this may have something to do with this vue-meta.js code:

    if (!rootVm[rootConfigKey]) {
      showWarningNotSupported();
      return {};
    } // collect & aggregate all metaInfo $options

Which is inside the refresh() function.