vue-gtm icon indicating copy to clipboard operation
vue-gtm copied to clipboard

Bug: cannot use without vue-route

Open mssayari opened this issue 3 years ago • 5 comments

Info

Tool Version
vue-gtm v1.6.0
Vue v3.2.37
OS linux

Input

import {createApp, h} from 'vue';
import {createInertiaApp} from '@inertiajs/inertia-vue3';
import {InertiaProgress} from '@inertiajs/progress';
import {VueReCaptcha} from 'vue-recaptcha-v3'
import {createGtm} from '@gtm-support/vue-gtm';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({el, app, props, plugin}) {
        const captchaKey = props.initialPage.props.recaptcha_site_key;
        return createApp({render: () => h(app, props)})
            .use(plugin)
            .use(VueReCaptcha, {
                siteKey: captchaKey, badge: 'inline',
                size: 'invisible'
            })
        app.use(
            createGtm({
                id: 'GTM-xxxxxx',
                queryParams: {
                    gtm_auth: 'AB7cDEf3GHIjkl-MnOP8qr',
                    gtm_preview: 'env-4',
                    gtm_cookies_win: 'x',
                },
            }),
        )
            .mixin({methods: {route}})
            .mount(el);
    },
});

Output or Error

ERROR in ./node_modules/@gtm-support/vue-gtm/dist/index.js 116:85-106
Module not found: Error: Package path . is not exported from package /var/www/html/node_modules/vue-router (see exports field in /var/www/html/node_modules/vue-router/package.json)    

webpack compiled with 1 error

Additional Context

I just installed it on Vue3 I don't have vue-router and I'm not going to use it.

mssayari avatar Jul 09 '22 08:07 mssayari

This seems to be related to #226 ... It seems to even be a problem even you do not rely on the optional dependency :grimacing: The vue-router 4.1 update seems to made a bad damage to this package :slightly_frowning_face:

Shinigami92 avatar Jul 09 '22 09:07 Shinigami92

@posva had you thought about to republish the vue-router as a breaking change? For now I may need to publish a fixed upper version range like @gtm-support/vue-gtm v1.6.0 with vue-router: >=4.0.0 <4.1.0 or something like this I never encountered such a conflict until now :slightly_frowning_face:

Shinigami92 avatar Jul 09 '22 09:07 Shinigami92

I messaged posva here: https://github.com/vuejs/router/issues/1463#issuecomment-1179512511

Shinigami92 avatar Jul 09 '22 09:07 Shinigami92

Thanks for reply.

but my question is why it's looking for vue-router while I don't have vue-router installed in my project and I haven't passed anything to vueRouter.

mssayari avatar Jul 09 '22 09:07 mssayari

I assume because of how dynamic imports in js works https://github.com/gtm-support/vue-gtm/blob/56fe72ef7c94a3c0f63bf37dbc2f93c09e6dd06f/src/index.ts#L116

If you know a modern (non-require) solution for that, PLEASE let me know how that works

Shinigami92 avatar Jul 09 '22 09:07 Shinigami92

Could you please test https://github.com/gtm-support/vue-gtm/releases/tag/2.0.0-beta.3

Shinigami92 avatar Sep 26 '22 12:09 Shinigami92

In this project I haven't used Vue Route, so can't say if it's working with it or not, but I'll try to use it in a different project. I think I have to update Vue Route to 4.1 to be able to test it.

mssayari avatar Sep 27 '22 09:09 mssayari

I release 2.0.0 Please reopen if anything broke

Shinigami92 avatar Oct 07 '22 12:10 Shinigami92