Connection with "${port.name}" already exists. Disconnecting

Error message

Connection with "${port.name}" already exists. Disconnecting the previous one and connecting the new one.

What it means

The BexBridge detected a second runtime.connect() from the same named port context while an existing connection with that name is still open. It warns, disconnects the stale port, cleans it up, and connects the new one. This is a self-healing warning, not a thrown exception.

Source

Thrown at app-vite/exports/bex/private/bex-bridge.js:129

      })

      return
    }

    /**
     * Else we're the background script
     */

    this.isConnected = true
    const onPacket = this.#onPacket.bind(this)

    runtime.onConnect.addListener(port => {
      // if it's not a bridge port on the other end,
      // then ignore it
      if (!portNameRE.test(port.name)) return

      if (this.portMap[port.name] !== void 0) {
        this.warn(
          `Connection with "${port.name}" already exists.` +
            ' Disconnecting the previous one and connecting the new one.'
        )
        this.portMap[port.name].disconnect()
        this.#cleanupPort(port.name)
      }

      this.portMap[port.name] = port

      port.onMessage.addListener(onPacket)
      port.onDisconnect.addListener(() => {
        port.onMessage.removeListener(onPacket)
        this.#cleanupPort(port.name)
        this.log(`Closed connection with ${port.name}.`)
        this.#onPortChange({ removed: port.name })
      })

      this.log(`Opened connection with ${port.name}.`)

View on GitHub (pinned to 4841521b5f)

Solutions

Ensure connect() is called only once per port name (guard setup code against re-execution).
Call bridge.disconnect(portName) before reconnecting with the same name.
On HMR, add an cleanup handler that disconnects the previous port before the module re-runs.
Verify you don't construct two BexBridge instances sharing the same port name.

Example fix

// before
const bridge = new Bridge('content-script')
bridge.send('hello') // re-run on HMR -> duplicate port
// after
if (!window.__bexBridge) {
  window.__bexBridge = new Bridge('content-script')
}
const bridge = window.__bexBridge

Defensive patterns

Strategy: validation

Validate before calling

if (typeof portName === 'string' && portName.length > 0 && !connectedPorts.has(portName)) {
  bridge.connect(portName)
  connectedPorts.add(portName)
}

Type guard

const isValidPortName = (n) => typeof n === 'string' && n.length > 0

Prevention

Instantiate the bridge once per context (module singleton).
Disconnect on teardown/HMR before reconnecting.
Use unique port names per script context.

When it happens

Trigger: Calling bridge.connect (or the content/background script init) twice with the same port name without disconnecting first, e.g. on hot module reload, service worker restart, or double-invoked setup code.

Common situations: Vite HMR reloading a content script while the background keeps the old port; a browser extension service worker waking up and re-running connection setup; accidental duplicate BexBridge instantiation in both content script contexts.

Related errors

AI-assisted analysis of quasarframework/quasar@4841521b5f (2026-08-30). Data as JSON: /api/errors/3b9ad9aa3b007bcb. Report an issue: GitHub.