Uncaught TypeError: Cannot read properties of undefined (reading 'update')

[MaxCpp]

Environment

• Operating System: Darwin
• Node Version: v20.9.0
• Nuxt Version: 3.10.2
• CLI Version: 3.10.1
• Nitro Version: 2.8.1
• Package Manager: npm@10.1.0
• Builder: -
• User Config: devtools, runtimeConfig, ignore, dev, ssr, hooks, components, vite, css, modules, i18n, app
• Runtime Modules: @pinia/nuxt@0.4.11, @nuxtjs/i18n@8.1.1, nuxt-gtag@2.0.5
• Build Modules: -

Reproduction

I try use method initialize with a tag ID in middleware and get in console log error. Example of code with reproduction: https://stackblitz.com/edit/github-rf1dov?file=middleware%2Fdetect.global.js,nuxt.config.ts

Describe the bug

I have in console log the error:

Additional context

No response

Logs

Uncaught TypeError: Cannot read properties of undefined (reading 'update')
    at config (js?id=G-Z6KBJM98PX:452:69)
    at Oy (js?id=G-Z6KBJM98PX:465:472)
    at Qy (js?id=G-Z6KBJM98PX:467:43)

[johannschopplich]

@MaxCpp Unfortunately, your reproduction doesn't produce an error. It seems to work just fine:

Can you please update the reproduction?

[MaxCpp]

@MaxCpp Unfortunately, your reproduction doesn't produce an error. It seems to work just fine:

Can you please update the reproduction?

Please open console.

[johannschopplich]

Thanks for the reproduction! I've opened the web container in a new tab, but there is still no error in the console, unfortunately.

Also, there is no update method on any of this module's internals. Any chance you can create another reproduction or share a screen recording?

[MaxCpp]

Please look: https://github.com/johannschopplich/nuxt-gtag/assets/5812783/3ed83ae9-793c-4c63-822c-d249e4b3429c

For information. If I add gtag in nuxt.config.js and after uses method initialize() I don’t have problem, but if use initialize(’tag id’) I have. Plus I tried add initialize(’tag id’) in page or layout, problem the same ((.

I think this method update from code of google tag and maybe it not correct initiale when we use initialize(’tag id’).

[jessielaf]

I am running into the same problem for the last couple of days. I will try to reproduce the problem. I am finding the same behavior as @MaxCpp where initialize is working with when supplying a tag-id it is not.

[johannschopplich]

Thank you both! I'm having trouble reproducing the issue.

Does the bug only occur in global middlewares? Can you try to use client-only middlewares? Since the Google Tag won't be initialized on the server anyway, this might simplify the project.

[jessielaf]

@johannschopplich I was not using global middlewares. When I used initialize once the user clicked on the cookie, I also got the same error.

[MaxCpp]

@johannschopplich client-only middlewares worked for me. Thank you!

[igor322]

I'm having the same problem, I tried to do in a component onMounted and in a client side plugin, both throws the error: TypeError: Cannot read properties of undefined (reading 'update')

[gertjanjansen]

I'm running into the same issue, since a few days. The strange thing is that it started happening 4 days ago while I didn't change anything related to this. I was still using version 1.2.1 but upgrading to 2.0.5 didn't fix it. My setup is similar as described above:

In nuxt.config.ts I have:

gtag: {
    id: undefined,
    enabled: false,
  },

Then I have a client only component, where I do this:

const { initialize } = useGtag()
initialize(myGoogleTagId)

I tried a few things like putting it in an onMounted hook, but nothing helped.

However, as soon as I set the id in nuxt.config.ts, it works fine. It looks like setting the id to G-0000000000 also works, though I need to investigate a bit more.

[marcbejar]

I'm facing the same issue. I have the following code:

nuxt.config.ts

gtag: {
    enabled: false,
    id: ''
},

layouts/default.vue

const { initialize } = useGtag()
initialize('myGoogleTagId')

Calling the initialize composable leads me to the error: Cannot read properties of undefined (reading 'update')

A workaround is to set myGoogleTagId into the id variable in the nuxt.config file, but this makes the Multi-Tenancy Support not funcitonal.

[johannschopplich]

I think I have found the issue. Gtag always requires a default config value to be set, which wasn't the case if you used the initialize('<id>') multi-tenancy support. Fixed in https://github.com/johannschopplich/nuxt-gtag/commit/3d9ea7d7715fdcc056e584c01154113581d07cf3.

Please try v2.0.6. Thanks!

[marcbejar]

I think I have found the issue. Gtag always requires a default config value to be set, which wasn't the case if you used the initialize('<id>') multi-tenancy support. Fixed in 3d9ea7d.

Please try v2.0.6. Thanks!

That works for for my case!

[johannschopplich]

@MaxCpp @jessielaf @gertjanjansen Please upgrade to v2.0.6. I have fixed the bug. You remove the empty Nuxt config Gtag id workaround and use initialize as intended now. Thanks for your patience! 🎬

[gertjanjansen]

@johannschopplich thanks for the fix. I think it works. However, could it be that the initCommands don't work for multi-tenancy? What's the recommended way to configure the initCommands using this setup?

[gertjanjansen]

@johannschopplich I investigated a bit more. This might need it's own issue, but I think I already have the solution so I'll post it here:

On this line, the initCommands are taken into account: https://github.com/johannschopplich/nuxt-gtag/blob/108a7d3485787d6ad539929bed4d9cbc44485f80/src/runtime/utils.ts#L13 But on this line they aren't: https://github.com/johannschopplich/nuxt-gtag/blob/108a7d3485787d6ad539929bed4d9cbc44485f80/src/runtime/composables/useGtag.ts#L26

Therefore, with multi-tenancy the initCommands don't work.

The simplest - but not cleanest - solution is to replace line 26 in useGtag with this:

const _options = toRaw(options);
const { config, initCommands } = _options;
tag = { id: id, config, initCommands }

[johannschopplich]

@gertjanjansen Please open a separate issue. Thanks!