"this.$gtag is not a function" in production but not locally

[Soviut]

I have the following google-gtag nuxt config

    ['@nuxtjs/google-gtag', {
      id: process.env.GOOGLE_ANALYTICS_ID,
      debug: process.env.NODE_ENV === 'development', // enable to track in dev mode

      // gtag config https://developers.google.com/analytics/devguides/collection/gtagjs/
      config: {
        send_page_view: false // necessary to avoid duplicated page track on page reload
      }
    }],

It works fine locally; no errors, events are triggered.

My circleCI build puts it all into a Docker container and deploys to heroku. I have those environment variables set in the Heroku dashboard. The NODE_ENV is production on Heroku.

I've logged into the container and made sure the variables are being imported, going as far as to start node and require('./nuxt.config.js') to make sure the id is being set properly.

No matter what, the google tag script element isn't added to the head of the page. As such, I get the following error when trying to access this.$gtag to trigger events.

TypeError: this.$gtag is not a function

[dohomi]

I can't give any further instructions without any demo project

[Soviut]

Yes, sorry, I've been meaning to follow this up with an explanation of the issue and how we solved it. Hopefully I can clarify that this week.

[Soviut]

The solution was that we needed to do a nuxt build && nuxt start so that it picked up the new production environment variables.

Even though nuxt.config.js is dynamic, somewhere along the line the environment variables in its structure get baked into the build.