Global variable clashes for Vue dev tools hooks

[d1820]

Vue version

3.5.26

Link to minimal reproduction

Can not provide

Steps to reproduce

compile vue 3 application into single js file, side load it into an existing site where buffer already exists on the window object. error is thrown.

Problem source

let buffer = []; //OFFENDING VAR
function setDevtoolsHook$1(hook, target) {
    var _a2, _b2;
    devtools$1 = hook;
    if (devtools$1) {
        devtools$1.enabled = true;
        buffer.forEach( ({event: event2, args}) => devtools$1.emit(event2, ...args));
        buffer = [];
    } else if (// handle late devtools injection - only do this if we are in an actual
    // browser environment to avoid the timer handle stalling test runner exit
    // (#4815)
    typeof window !== "undefined" && // some envs mock window but not fully
    window.HTMLElement && // also exclude jsdom
    // eslint-disable-next-line no-restricted-syntax
    !((_b2 = (_a2 = window.navigator) == null ? void 0 : _a2.userAgent) == null ? void 0 : _b2.includes("jsdom"))) {
        const replay = target.__VUE_DEVTOOLS_HOOK_REPLAY__ = target.__VUE_DEVTOOLS_HOOK_REPLAY__ || [];
        replay.push( (newHook) => {
            setDevtoolsHook$1(newHook, target);
        }
        );
        setTimeout( () => {
            if (!devtools$1) {
                target.__VUE_DEVTOOLS_HOOK_REPLAY__ = null;
                buffer = [];
            }
        }
        , 3e3);
    } else {
        buffer = [];
    }
}

What is expected?

vue variables placed on global scope should have a vue_ prefix or something to ensure there are no clashes with other frameworks, libs, or source using the same names

What is actually happening?

console error breaking application
Uncaught SyntaxError: Identifier 'buffer' has already been declared

System Info

Chrome latest

Any additional comments?

No response

[edison1105]

compile vue 3 application into single js file, side load it into an existing site where buffer already exists on the window object. error is thrown.

Could you please provide a minimal reproduction?

[d1820]

I'm working on getting a repo to see the issue. It's def an issue I have hacked it so far by a post process to change my bundle

[edison1105]

@d1820 Please provide a minimal runnable reproduction

[d1820]

the example is hard to create, with out getting more and more code. i figured ill just post the script i use post build to clean it up.

its related to VUE devtools being injected into the build. The friendly lib fix would be to just prefix any global being injected into js, and all problems go away and it can support however anyone is building and deploying.

none of the online VUE app builders build the same way as locally, and me setting it up locally, is time consuming trying to get all the pieces.. I can try to get one still, but wont be this week.

in the interim for anyone else this is how i fixed the issue:

$ErrorActionPreference = 'Stop'

function Write-Info([string]$message) {
  Write-Host "[patch-remote-entry-buffer] $message"
}

function Write-Utf8NoBomFileWithRetry(
  [string]$filePath,
  [string]$text,
  [int]$maxRetries = 10,
  [int]$initialDelayMs = 150
) {
  $encoding = [System.Text.UTF8Encoding]::new($false)
  $delayMs = $initialDelayMs

  for ($attempt = 1; $attempt -le $maxRetries; $attempt += 1) {
    try {
      [System.IO.File]::WriteAllText($filePath, $text, $encoding)
      return
    }
    catch [System.IO.IOException] {
      if ($attempt -ge $maxRetries) {
        throw
      }
      Start-Sleep -Milliseconds $delayMs
      $delayMs = [Math]::Min($delayMs * 2, 2000)
    }
  }
}

function Get-ProjectRoot([string]$startDir) {
  $dir = $startDir
  for ($i = 0; $i -lt 10; $i += 1) {
    if (Test-Path -LiteralPath (Join-Path $dir 'package.json')) {
      return $dir
    }
    $parent = Split-Path -Parent $dir
    if ([string]::IsNullOrWhiteSpace($parent) -or $parent -eq $dir) {
      break
    }
    $dir = $parent
  }
  return $startDir
}

$projectRoot = Get-ProjectRoot -startDir $PSScriptRoot
$distDir = Join-Path $projectRoot 'dist'

if (-not (Test-Path -LiteralPath $distDir)) {
  Write-Host "dist not found at $distDir; exiting postBuild.ps1" -ForegroundColor Yellow
  exit 0
}

# Vite outputs can be in dist root or dist/assets. Patch any remote-entry*.js we find.
$bundlePaths = Get-ChildItem -LiteralPath $distDir -Recurse -File -Filter 'remote-entry*.js' |
Select-Object -ExpandProperty FullName

if (-not $bundlePaths -or $bundlePaths.Count -eq 0) {
  Write-Info "no remote-entry*.js found under $distDir; skipping"
  exit 0
}

$patchedCount = 0
foreach ($bundlePath in $bundlePaths) {
  $contents = Get-Content -LiteralPath $bundlePath -Raw -Encoding UTF8

  # Only patch bundles that contain the original `buffer` declaration.
  if ($contents -notmatch '\blet\s+buffer\s*=') {
    continue
  }

  # Idempotent replacements: don't re-patch already-updated `vue_buffer` references.
  $original = $contents
  $contents = $contents -replace '(?<!\w)buffer\.forEach', 'vue_buffer.forEach'
  $contents = $contents -replace '(?<!\w)buffer\s*=\s*\[\]\s*;', 'vue_buffer = [];'

  if ($contents -ne $original) {
    Write-Utf8NoBomFileWithRetry -filePath $bundlePath -text $contents
    $patchedCount += 1
    Write-Info ("patched " + (Resolve-Path -LiteralPath $bundlePath).Path)
  }
}

if ($patchedCount -eq 0) {
  Write-Info 'no changes needed'
}