vue-gtm
vue-gtm copied to clipboard
Bug: cannot use without vue-route
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.
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:
@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:
I messaged posva here: https://github.com/vuejs/router/issues/1463#issuecomment-1179512511
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.
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
Could you please test https://github.com/gtm-support/vue-gtm/releases/tag/2.0.0-beta.3
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.
I release 2.0.0 Please reopen if anything broke