Google Tag Manager 400 Error

[JonathanXDR]

🐛 The bug

When running or building a Nuxt project that uses the Nuxt Scripts module, the build fails with a 400 Bad Request error originating from a request to https://www.googletagmanager.com/gtm.js.

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-qsvb2xmv?file=nuxt.config.ts

🌈 Expected behavior

The build should succeed without errors, even when GTM is integrated.

ℹ️ Additional context

System

• Operating System: Darwin
• Node Version: v23.10.0
• Nuxt Version: 3.16.1
• CLI Version: 3.23.1
• Nitro Version: 2.11.8
• Package Manager: bun@1.2.7
• Builder: -
• User Config: modules, $development, $production, ssr, components, devtools, app, css, router, site, colorMode, runtimeConfig, ignore, routeRules, future, compatibilityDate, typescript, eslint, fonts, i18n, icon, image, robots, schemaOrg, scripts, security, sitemap, viewport
• Runtime Modules: @nuxt/scripts@0.11.5, @nuxt/eslint@1.3.0, @nuxt/image@1.10.0, @nuxt/icon@1.11.0, @nuxt/fonts@0.11.0, @nuxtjs/color-mode@3.5.2, @nuxtjs/i18n@9.4.0, @nuxtjs/seo@3.0.1, @nuxtjs/tailwindcss@6.13.2, @vueuse/nuxt@13.0.0, nuxt-security@2.2.0, nuxt-viewport@2.2.0
• Build Modules: -

Logs:

jonathan@MacBook-Pro-von-Jonathan Application-Website-Frontend % nr build
$ nuxt build
Nuxt 3.16.1 with Nitro 2.11.8                                                                                                                                                   nuxi  16:38:06
ℹ Using Tailwind CSS from ~/assets/css/tailwind.css                                                                                                                 nuxt:tailwindcss 16:38:07
ℹ Nuxt Icon server bundle mode is set to local                                                                                                                                       16:38:07
✔ Nuxt Icon discovered local-installed 4 collections: fa6-brands, fa6-solid, logos, simple-icons                                                                                     16:38:08
✔ Nuxt Icon loaded local collection simple-icons-extended with 3 icons                                                                                                               16:38:08
✔ Nuxt Icon loaded local collection sf-symbols-small with 6404 icons                                                                                                                 16:38:09
✔ Nuxt Icon loaded local collection sf-symbols-medium with 6404 icons                                                                                                                16:38:09
✔ Nuxt Icon loaded local collection sf-symbols-large with 6404 icons                                                                                                                 16:38:09
ℹ Running with compatibility version 4                                                                                                                                          nuxt 16:38:09
ℹ Building for Nitro preset: node-server                                                                                                                                       nuxi  16:38:09
ℹ Building client...                                                                                                                                                                 16:38:10
ℹ vite v6.2.4 building for production...                                                                                                                                             16:38:10
ℹ ✓ 685 modules transformed.                                                                                                                                                         16:38:14

 ERROR  ✗ Build failed in 6.08s                                                                                                                                                       16:38:16


 ERROR  Nuxt Build Error: [nuxt:scripts:bundler-transformer] [GET] "https://www.googletagmanager.com/gtm.js": 400 Bad Request                                                   nuxi  16:38:16
file: virtual:nuxt:%2FUsers%2Fjonathan%2FDeveloper%2FGit%2FGitHub%2FApplication-Website-Frontend%2Fnode_modules%2F.cache%2Fnuxt%2F.nuxt%2Fmodules%2F%40nuxt-scripts%2Fplugin.mjs

    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async downloadScript (node_modules/@nuxt/scripts/dist/module.mjs:186:11)
    at async Object.enter (node_modules/@nuxt/scripts/dist/module.mjs:325:23)
    at async AsyncWalker.visit (node_modules/estree-walker/src/async.js:65:5)
    at async AsyncWalker.visit (node_modules/estree-walker/src/async.js:107:7)
    at async AsyncWalker.visit (node_modules/estree-walker/src/async.js:100:15)
    at async AsyncWalker.visit (node_modules/estree-walker/src/async.js:100:15)
    at async AsyncWalker.visit (node_modules/estree-walker/src/async.js:107:7)
    at async AsyncWalker.visit (node_modules/estree-walker/src/async.js:107:7)
    at async AsyncWalker.visit (node_modules/estree-walker/src/async.js:100:15)

error: script "build" exited with code 1
jonathan@MacBook-Pro-von-Jonathan Application-Website-Frontend % 

[harlan-zw]

Hi, so the issue is that GTM is configured to load but the id is missing so the bundling fails. I've updated it to skip bundling if any required query params are missing.

[JonathanXDR]

Hey, thanks for the update. However, even if I do provide the id it fails. Am I doing something wrong here?

export default defineNuxtConfig({
  modules: ['@nuxt/scripts'],
  compatibilityDate: '2024-08-21',
  scripts: {
    defaultScriptOptions: {
      bundle: true,
    },
    registry: {
      googleTagManager: {
        id: 'G-LRN6DJ4KXN',
      },
    },
  },
});

[harlan-zw]

Hmm interesting, will re-open to investigate with this exact config

[JonathanXDR]

Alright, thanks!