Vue-Meta not working on Vue 3

[guccilive]

After installing the vue-meta 3 alpha 8. I'm getting the error(see attached image). ./node_modules/vue-meta/dist/vue-meta.esm-browser.min.js 8:7170

Here is my main.js file configuration. import { createMetaManager, plugin as metaPlugin } from 'vue-meta'

//...

const metaManager = createMetaManager()

const app = createApp(App) .use(store) .use(router) .use(i18n) .use(metaManager) .use(metaPlugin) // optional, only needed for OptionsAPI (see below) // .use(Meta) ApiService.init(app)

globalComponents(app) utils(app)

app.mount('#app')

[abdurahmanrizal]

i got same problem, please help

[Penguinlay]

Can you post the minimal reproduction? Either codesandbox or better yet, clonable repo would be great!

[farissi]

same error here

[pimlie]

As requestes by @Penguinlay, please provide a minimal reproduction. I cannot repro this issue with eg this Vite example repo: https://github.com/pimlie/vue-meta-vite-example

[raimondslindezutzu]

ERROR Failed to compile with 1 error 9:12:34 AM

error in ./node_modules/vue-meta/dist/vue-meta.esm-browser.min.js

Module parse failed: Unexpected token (798:10) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | const createMetaManager = (isSSR = false, config, resolver) => MetaManager.create(isSSR, config || defaultConfig, resolver || defaultResolver); | class MetaManager { -> isSSR = false; | config; | target;

npm v7.17.0 node v14.16.0

"dependencies": { "axios": "^0.21.1", "bootstrap": "^5.0.1", "core-js": "^3.6.5", "lodash": "^4.17.21", "mitt": "^2.1.0", "moment": "^2.29.1", "smart-tagz": "^0.2.0", "vue": "^3.0.0", "vue-i18n": "^9.1.3", "vue-meta": "^3.0.0-alpha.9", "vue-plugin-load-script": "^2.0.1", "vue-router": "^4.0.0-0", "vue3-autocomplete": "^1.0.2", "vue3-carousel": "^0.1.21", "vue3-datepicker": "^0.2.4", "vue3-editor": "*", "vuex": "^4.0.0-0" },

We have a weird scenario where it fails on 1 PC and works on another... Tried everything - deleting node_modules, reinstalling, downgrading npm, downgrading vue-meta... Not sure how to reproduce...

[Penguinlay]

One way to find out where it went wrong is:

1. Clone your current project with the issue.
2. Slowly removing components and dependencies until the problem disappear. That way, you can find out which dependency is causing the issue. And, you could be able to produce a minimal reproduction without having to expose your private project. Otherwise, without lookinig at the code, it is hard for us to determine whether the issue is isolated to Vue Meta or comflict between dependencies or error in the project itself.

[Penguinlay]

Most of the time, you should not need to change the versions to debug the issue.

[raimondslindezutzu]

After reinstalling everything 10 times! I was unable to run the project w/o vue-meta, because it was cached and npm cache clean --force was unable to help...

npm install --save vue-meta@^3.0.0-alpha.7

fixed the issue

[levazver]

you just need to to transform it with Webpack/Babel as described in docs: https://github.com/nuxt/vue-meta/tree/next#ssr add to your babel.config.js this:

module.exports = {
  presets: [
    '@babel/preset-env',
    '@vue/cli-plugin-babel/preset'
  ]
}

and this lines to vue.config.js

module.exports = {
    transpileDependencies: [
        'vue-meta',
    ],
}

[baronkoko]

The same. After adding vue-meta to transpileDependencies, the app was built successfully but the title does not change. Can anyone help? [email protected] [email protected] Reproduction link https://github.com/baronkoko/vue-3-meta

[alimony]

@baronkoko Add <metainfo></metainfo> somewhere in your template.

[baronkoko]

@alimony Thank you very much, now it's working

[hongtu1993]

After reinstalling everything 10 times! I was unable to run the project w/o vue-meta, because it was cached and npm cache clean --force was unable to help...

npm install --save vue-meta@^3.0.0-alpha.7

fixed the issue

I change version [email protected] to [email protected], then working fine.

[simeon-petrov-5]

you just need to to transform it with Webpack/Babel as described in docs: https://github.com/nuxt/vue-meta/tree/next#ssr add to your babel.config.js this:

module.exports = {
  presets: [
    '@babel/preset-env',
    '@vue/cli-plugin-babel/preset'
  ]
}

and this lines to vue.config.js

module.exports = {
    transpileDependencies: [
        'vue-meta',
    ],
}

I had the exactly same issue with vue@^3.2.21 & [email protected] in a vue-cli app (no SSR).

Adding these two changes fixed my project

• transpileDependencies: ['vue-meta'] to vue.config.js
• '@babel/preset-env' to babel.config.js (before I had only @vue/cli-plugin-babel/preset)

If I leave out the babel addition I get a new error (showing only as a reference)

in ./node_modules/vue-meta/dist/vue-meta.esm-browser.min.js

Module parse failed: Unexpected token (648:13)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     created() {
|       const e = o();
>       if (!e?.type || !(t.keyName in e.type)) return;
|       const r = e.type[t.keyName];
|       y(r) ? B(f(r)) : B(r);

 @ ./src/main.js 25:0-67 28:20-37 30:8-18
 @ multi (webpack)-dev-server/client?https://192.168.0.153:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

[kyrylo93]

@alimony Thank you very much, now it's working

Hi, does it really helps you? because i have same situation, but adding such tag didn't help

[baronkoko]

Yeah, it does help me. Maybe you have a different setup

@alimony Thank you very much, now it's working

Hi, does it really helps you?

because i have same situation, but adding such tag didn't help

[kepi0809]

tried all these options, however unfortunately none of the suggestions worked for me. Since my case is only an SPA site (no SSR) only needed to change the title of the page, so ended up using the teleport component like somebody has suggested in another issue.

If somebody would have the same issue as me here's my solution hope it helps somebody :v:

useDefaultTItle.ts

import {
    ref, watch, getCurrentInstance, nextTick,
} from 'vue';

export default () => {
    const vm: any = getCurrentInstance()?.proxy;

    const renderDefaultTitle = ref(false);

    // * run when route changes
    watch(() => vm.$route.name, () => {
        // * wait the view component to render
        nextTick(() => {
            const titleArray = document.querySelectorAll('title');
            if (titleArray.length > 1) {
                for (const [i, titleNode] of titleArray.entries()) {
                    // * keep only the latest node
                    if (i < titleArray.length - 1) titleNode.remove();
                }
            }

            renderDefaultTitle.value = !document.title;
        });
    }, { immediate: true });

    return { renderDefaultTitle };
};

App.vue template:

    <teleport v-if="renderDefaultTitle" to="head">
        <title>YOUR_DEFAULT_TITLE</title>
    </teleport>

in the options API:

        setup() {
            const { renderDefaultTitle } = useDefaultTitle();
            return { renderDefaultTitle };
        },

and used the following in my layout templates:

    <teleport to="head">
        <title>{{ title || 'default' }} - rest of the title</title>
    </teleport>

here title is a translated text by vue-i18n

[jagoncalves14]

If it helps anyone, I was having this exact same issue but only when running Storybook's build script (npm run build-storybook).

While running that script with vue-meta on v3.0.0-alpha.9, I kept having the following error:

ERR! => Failed to build the preview
ERR! ./node_modules/.pnpm/[email protected][email protected]/node_modules/vue-meta/dist/vue-meta.esm-browser.min.js 665:13
ERR! Module parse failed: Unexpected token (665:13)
ERR! File was processed with these loaders:
ERR!  * ./node_modules/.pnpm/[email protected]_ecbaa735a1342739b508fb94bc4fd047/node_modules/babel-loader/lib/index.js
ERR! You may need an additional loader to handle the result of these loaders.
ERR! |     created() {
ERR! |       const e = (0, _vue.getCurrentInstance)();
ERR! >       if (!e?.type || !(t.keyName in e.type)) return;
ERR! |       const r = e.type[t.keyName];
ERR! |       y(r) ? B((0, _vue.computed)(r)) : B(r);

I also found out, based on the comments on this issue, that rolling back vue-meta to v3.0.0-alpha.7 was solving the issue. But I kept trying to make it work on the latest alpha version.

The solution for me was adding to .storybook/main.js the following code:

module.exports = {

  [...] // Along with other storybook configs

  webpackFinal: (config, { configType }) => {
    config.module.rules.push({
      test: /vue-meta\.esm-browser.min\.(js|jsx)$/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: [
            '@babel/preset-env',
            '@vue/cli-plugin-babel/preset'
          ]
        }
      },
    })

    return config
  },
}

[lain0]

jagoncalves14 Webpack starts ok with your config with vue-meta on v3.0.0-alpha.10, thanks.

[stale[bot]]

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.

[brickgale]

@jagoncalves14 thanks that helped (resolved compiler errors)! but i'm still getting an error regarding Proxy.

Uncaught TypeError: Cannot create proxy with a non-object as target or handler 
vue-meta.esm-browser.min.js:8

There are no compile errors. if there's anyone also trying to upgrade to vue 3 with minimal changes on webpack config (webpack v4), like me, would likely encounter this issue.

[timmygee]

you just need to to transform it with Webpack/Babel as described in docs: https://github.com/nuxt/vue-meta/tree/next#ssr add to your babel.config.js this:

module.exports = {
  presets: [
    '@babel/preset-env',
    '@vue/cli-plugin-babel/preset'
  ]
}

and this lines to vue.config.js

module.exports = {
    transpileDependencies: [
        'vue-meta',
    ],
}

How does one do this since Vue 3 uses Vite now?

I've noticed there doesn't seem to be much chat about this issue in the last year or so, so potentially I'm doing something wrong but as soon as I call useMeta in my component setup (yes I have followed the README on how to install vue-meta correctly in my main.js) I get this error in the console:

vue-meta.esm-bundler.js:841 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'resolve')
    at Object.resolve2 [as resolve] (vue-meta.esm-bundler.js:841:25)
    at recompute (vue-meta.esm-bundler.js:270:32)
    at compute (vue-meta.esm-bundler.js:430:27)
    at Object.addSource (vue-meta.esm-bundler.js:437:17)
    at MetaManager.addMeta (vue-meta.esm-bundler.js:753:34)
    at useMeta (vue-meta.esm-bundler.js:687:31)
    at setup (PaypalButton.vue:55:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js:173:22)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7265:29)
    at setupComponent (runtime-core.esm-bundler.js:7220:11)

I'm using the latest vue-meta 3.0.0-alpha.2 with Vue 3 3.2.47

Is anyone else experiencing this. It's the first time I've tried vue-meta with Vue 3 and I can't get it to work.

[tripflex]

For anybody showing up later searching, this project is no longer maintained ( https://github.com/nuxt/vue-meta/issues/808 ) and suggest looking at using something like https://github.com/unjs/unhead/