GTM script loads in development even with $production override #479
Description
🐛 The bug
Using $production in nuxt.config.ts to register googleTagManager still results in the script loading during development, triggering a CORS error and a runtime validation error:
googleTagManager.id: Invalid key: Expected "id" but received undefined
Stacktrace + browser error
Access to script at 'https://www.googletagmanager.com/gtm.js' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present.
googleTagManager.id: Invalid key: Expected "id" but received undefined
Additional symptom
GTM is only defined under $production, yet the following script tag still appears in the <head> during development:
<script src="https://www.googletagmanager.com/gtm.js" ... />
🛠️ To reproduce
https://stackblitz.com/edit/nuxt-starter-jnrmuch7?file=pages%2Findex.vue
🌈 Expected behavior
GTM should load only in production, as documented:
export default defineNuxtConfig({
$production: {
scripts: {
registry: {
googleTagManager: {
id: 'GTM-XXXXXX',
},
},
},
},
})
Instead, GTM is still being registered (or partially initialized) in development, even though it is not declared in the base scripts.registry block.
ℹ️ Additional context
Environment:
- Nuxt: 4.0.1
- @nuxt/scripts: 0.11.10