Nextjs and Typescript @analytics/google-tag-manager error after import

[santyas]

Hello! Is there any support/package for that plugin with typescript?

Thank you! S

[DavidWells]

No types are included with this package. You will need to do something like this https://github.com/DavidWells/analytics/issues/99#issuecomment-736153120

[dobesv]

The docs currently are indicating that TypeScript is supported. Is this something you are working on or have plans for?

https://github.com/DavidWells/analytics#typescript-support

[PaulCarduelis]

Can confirm, yarn wasn't be able to manage typescript definitions after installing this package.

Could not find a declaration file for module '@analytics/google-analytics'. 'C:/gorazdo/squads/node_modules/@analytics/google-analytics/lib/analytics-plugin-ga.cjs.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/analytics__google-analytics` if it exists or add a new declaration (.d.ts) file containing `declare module '@analytics/google-analytics';`

For the google purposes ^

[xrow]

Same with me.

[engmsaleh]

I have the same issue and I have fixed it as per advice from several answers

For my analytics file in type script I have

import googleTagManager from '@analytics/google-tag-manager'
import Analytics from 'analytics'

const analytics = Analytics({
    app: process.env.NEXT_PUBLIC_ANALYTICS_APP_NAME,
    debug: true,
    plugins: [
        googleTagManager({
            containerId: process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID || ""
        }),
    ]
})

export default analytics

and I have a file for extra type definitions additional.d.ts where I put the following

declare module '@analytics/google-tag-manager' {
    export interface googleTagManagerProps {
      containerId: string
      dataLayerName?: string
      customScriptSrc?: string
      preview?: string
      auth?: string
      execution?: string
    }
  
    function googleTagManager({
      containerId,
      dataLayerName,
      customScriptSrc,
      preview,
      auth,
      execution
    }: googleTagManagerProps)
  
    export = googleTagManager
  }

[santyas]

Great! Where have you created that additional.d.ts file?

[bradiosd]

Great! Where have you created that additional.d.ts file?

You can add this in the following directory if using nextjs.

src/additional.d.ts

The nextjs default tsconfig file will autoamtically pick up definitions from anywhere in src.