Nuxt•2w ago

useScriptGoogleTagManager returns void

Hello, I'm trying to use useScriptGoogleTagManager

const { proxy } = useScriptGoogleTagManager({
            id: this._gtm
        })

const { proxy } = useScriptGoogleTagManager({
            id: this._gtm
        })

It says : Property 'proxy' does not exist on type 'void'.ts(2339) I'm a bit lost, it looks like it should work from this link ? https://scripts.nuxt.com/scripts/tracking/google-tag-manager

Nuxt Scripts

Google Tag Manager · Nuxt Scripts

Use Google Tag Manager in your Nuxt app.

15 Replies

kapa.ai•2w ago

Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it appears that you're encountering an unexpected issue with the useScriptGoogleTagManager composable. The documentation indeed suggests that it should return an object with a proxy property. Let's address this issue: 1. First, make sure you have properly set up Nuxt Scripts in your project and that you're using the latest version. 2. The usage you've shown is correct according to the documentation Google Tag Manager. The composable should return an object with a proxy property. 3. The error you're seeing suggests that TypeScript is not recognizing the correct return type for the composable. This could be due to a few reasons: - There might be a type definition issue in your project. - You might be using an outdated version of Nuxt Scripts. - There could be a bug in the current version of Nuxt Scripts. 4. To troubleshoot this, you can try the following: - Ensure you've imported the composable correctly:

     import { useScriptGoogleTagManager } from '#imports'

     import { useScriptGoogleTagManager } from '#imports'

- Try updating Nuxt Scripts to the latest version.
- If the issue persists, you might want to try using the composable without destructuring:

     const gtm = useScriptGoogleTagManager({
       id: this._gtm
     })
     // Then use gtm.proxy

     const gtm = useScriptGoogleTagManager({
       id: this._gtm
     })
     // Then use gtm.proxy

5. If none of the above steps resolve the issue, it would be helpful to create a minimal reproduction of the problem. You can use the Minimal Nuxt Scripts StackBlitz playground to create a reproduction, as mentioned in the Submitting an issue guide. 6. Once you have a reproduction, you should consider submitting an issue to the Nuxt Scripts GitHub repository with your reproduction and details about your environment (Nuxt version, Nuxt Scripts version, etc.). Remember, the documentation suggests that this should work as you've written it, so this appears to be an unexpected behavior that might require further investigation by the Nuxt Scripts maintainers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OmnislashOP•2w ago

@kapa.ai I installed scripts with : npx nuxi@latest module add scripts I just added import { useScriptGoogleTagManager } from '#imports' at the top of my file still the same problem : Property 'proxy' does not exist on type 'void'.ts(2339)

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for providing more details about your setup. It seems that you've followed the correct installation process for Nuxt Scripts, but you're still encountering the same TypeScript error. Let's try to troubleshoot this further: 1. First, make sure that your Nuxt project is up to date. The #imports syntax is a feature of newer Nuxt versions, so ensure you're using Nuxt 3. 2. The error you're seeing suggests that TypeScript is not recognizing the correct return type for the useScriptGoogleTagManager composable. This could be due to a type definition issue. 3. To address this, try the following steps: a. Run nuxi prepare in your project directory. This command generates TypeScript declaration files and should update the types for auto-imports. b. If you're using Visual Studio Code, try restarting the TypeScript server. You can do this by opening the command palette (Ctrl+Shift+P or Cmd+Shift+P), typing "TypeScript: Restart TS server", and pressing Enter. c. Make sure your tsconfig.json is properly set up. It should extend the Nuxt-generated TypeScript configuration. Add or update this line in your tsconfig.json:

      {
        "extends": "./.nuxt/tsconfig.json"
      }

      {
        "extends": "./.nuxt/tsconfig.json"
      }

4. If the issue persists, you can try using a type assertion as a temporary workaround:

   const { proxy } = useScriptGoogleTagManager({
     id: this._gtm
   }) as { proxy: any }

   const { proxy } = useScriptGoogleTagManager({
     id: this._gtm
   }) as { proxy: any }

Note that this is not an ideal solution, but it can help you proceed with development while the underlying issue is being resolved. 5. If none of the above steps resolve the issue, it would be helpful to create a minimal reproduction of the problem. You can use the Minimal Nuxt Scripts StackBlitz playground to create a reproduction, as mentioned in the Submitting an issue guide. 6. Once you have a reproduction, consider submitting an issue to the Nuxt Scripts GitHub repository with your reproduction and details about your environment (Nuxt version, Nuxt Scripts version, TypeScript version, etc.). Remember, the documentation suggests that this should work as you've written it, so this appears to be an unexpected behavior that might require further investigation by the Nuxt Scripts maintainers. Creating a reproduction will greatly help in identifying and resolving the issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OmnislashOP•2w ago

@kapa.ai I tried restarting visual studio code, still nothing

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that restarting Visual Studio Code didn't resolve the issue. Let's try a few more troubleshooting steps: 1. First, make sure you've run nuxi prepare in your project directory as mentioned earlier. This command is crucial for generating up-to-date TypeScript declarations. 2. Check your Nuxt version. Run npm list nuxt in your terminal to see the installed version. Make sure you're using Nuxt 3. 3. Verify that Nuxt Scripts is properly installed. Run npm list @nuxt/scripts to check its version. 4. If you haven't already, try clearing your TypeScript cache. You can do this by deleting the .nuxt folder in your project directory and then running nuxi prepare again. 5. Double-check that your tsconfig.json file is correctly set up as mentioned in the previous response. 6. If the issue persists, it might be helpful to create a minimal reproduction of the problem. You can use the Minimal Nuxt Scripts StackBlitz playground to create a reproduction, as mentioned in the Submitting an issue guide. 7. Once you have a reproduction, consider submitting an issue to the Nuxt Scripts GitHub repository. Include your reproduction, details about your environment (Nuxt version, Nuxt Scripts version, TypeScript version), and the steps you've taken to troubleshoot. Remember, the behavior you're experiencing is unexpected based on the documentation. Creating a reproduction will greatly help the Nuxt Scripts maintainers in identifying and resolving the issue. If you're under time constraints and need a temporary workaround, you could try using the type assertion method mentioned in the previous response:

const { proxy } = useScriptGoogleTagManager({
  id: this._gtm
}) as { proxy: any }

const { proxy } = useScriptGoogleTagManager({
  id: this._gtm
}) as { proxy: any }

However, this is not an ideal long-term solution, and it's better to identify and resolve the root cause of the type mismatch. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OmnislashOP•2w ago

@kapa.ai if I try nuxi prepare, it says : PS D:\Projects\tm-website> nuxi prepare nuxi : The term 'nuxi' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. I know it's the right folder

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the error message you're seeing, it appears that the nuxi command is not recognized in your system. This usually happens when the Nuxt CLI (nuxi) is not installed globally or is not in your system's PATH. Let's address this issue: 1. First, make sure you have Nuxt installed in your project. You can check this by looking at your package.json file or by running:

   npm list nuxt

   npm list nuxt

If Nuxt is not installed, you should install it first. 2. The nuxi command is typically available when you use npx. Try running:

   npx nuxi prepare

   npx nuxi prepare

This should work even if nuxi is not installed globally. 3. If you prefer to use nuxi directly without npx, you can install it globally:

   npm install -g nuxi

   npm install -g nuxi

After installation, try running nuxi prepare again. 4. If you're using a package manager other than npm (like yarn or pnpm), make sure to use the appropriate command for running scripts. For example:

   yarn nuxi prepare

   yarn nuxi prepare

   pnpm nuxi prepare

   pnpm nuxi prepare

5. If you're still having issues, you might need to check your system's PATH environment variable to ensure that the npm global bin directory is included. Remember, it's generally recommended to use npx to run nuxi commands, as this ensures you're using the version of nuxi that's compatible with your project's Nuxt version. If you continue to have issues, you might want to check your project's setup and ensure that Nuxt is properly installed. You can refer to the Nuxt Installation guide for more information on setting up a Nuxt project correctly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OmnislashOP•2w ago

~~@Kilisei removing .nuxt and relaunching npx nuxi prepare didn't solve it~~ oops, sorry, missed kapa ^^" @kapa.ai removing .nuxt and relaunching npx nuxi prepare didn't solve it

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that removing the .nuxt directory and running npx nuxi prepare didn't resolve the issue. This is indeed a persistent problem that requires further investigation. Let's try a few more steps: 1. First, let's check your Nuxt and Nuxt Scripts versions. Run these commands in your project directory:

   npx nuxi --version
   npm list @nuxt/scripts

   npx nuxi --version
   npm list @nuxt/scripts

This will help us understand if you're using the latest versions. 2. Make sure your nuxt.config.ts file is properly configured for Nuxt Scripts. It should include something like this:

   export default defineNuxtConfig({
     modules: ['@nuxt/scripts'],
     scripts: {
       registry: {
         googleTagManager: {
           id: 'YOUR_GTM_ID'
         }
       }
     }
   })

   export default defineNuxtConfig({
     modules: ['@nuxt/scripts'],
     scripts: {
       registry: {
         googleTagManager: {
           id: 'YOUR_GTM_ID'
         }
       }
     }
   })

3. If you're still experiencing type issues, it might be related to a known issue with TypeScript in Nuxt projects. As a workaround, you can try adding the following to your nuxt.config.ts:

   export default defineNuxtConfig({
     typescript: {
       shim: false
     },
     // ... other configurations
   })

   export default defineNuxtConfig({
     typescript: {
       shim: false
     },
     // ... other configurations
   })

This setting is mentioned in the Nuxt TypeScript documentation and might help resolve some type-related issues. 4. If the problem persists, it would be extremely helpful to create a minimal reproduction of the issue. You can use the Minimal Nuxt Scripts StackBlitz playground to create a reproduction, as mentioned in the Submitting an issue guide. 5. Once you have a reproduction, I strongly recommend submitting an issue to the Nuxt Scripts GitHub repository. Include your reproduction, the versions of Nuxt and Nuxt Scripts you're using, and all the steps you've taken to troubleshoot. This seems to be a complex issue that might require attention from the Nuxt Scripts maintainers. Creating a detailed issue with a reproduction will be the most effective way to get it resolved. In the meantime, if you need a temporary workaround to continue development, you could use a type assertion:

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_GTM_ID'
}) as { proxy: any }

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_GTM_ID'
}) as { proxy: any }

However, this is not an ideal long-term solution, and it's better to identify and resolve the root cause of the type mismatch with the help of the Nuxt Scripts maintainers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OmnislashOP•2w ago

omfg I forgot to add the module, I don't know why in my mind the npx nuxi@latest module add scripts would do it solved

Gaming

Programming

useScriptGoogleTagManager returns void

Did you find this page helpful?