Freika/dawarich · warning

[Maps V2] Search targets not found, search functionality dis

Error message

[Maps V2] Search targets not found, search functionality disabled

What it means

The Maps v2 Stimulus controller wires location search only when both Stimulus targets — searchInput and searchResults — exist within its DOM scope. If either data-maps--maplibre-target attribute is missing (element omitted from the view, target renamed, or markup placed outside the data-controller element), search is silently disabled with this warning and the rest of the map works normally.

Source

Thrown at app/javascript/controllers/maps/maplibre_controller.js:430

    this.map = map
    this._persistView = () => saveView(this.map, this.apiKeyValue)
    this.map.on("moveend", this._persistView)
  }

  /**
   * Initialize API client
   */
  initializeAPI() {
    this.api = new ApiClient(this.apiKeyValue, this.importIdValue || null)
  }

  /**
   * Initialize location search
   */
  initializeSearch() {
    if (!this.hasSearchInputTarget || !this.hasSearchResultsTarget) {
      console.warn(
        "[Maps V2] Search targets not found, search functionality disabled",
      )
      return
    }

    this.searchManager = new SearchManager(this.map, this.apiKeyValue)
    this.searchManager.initialize(
      this.searchInputTarget,
      this.searchResultsTarget,
    )
  }

  /**
   * Load map data from API
   */
  async loadMapData(options = {}) {
    return this.mapDataManager.loadMapData(
      this.startDateValue,

View on GitHub (pinned to 97fad417c5)

Solutions

  1. Inspect the map element's DOM: both data-maps--maplibre-target="searchInput" and data-maps--maplibre-target="searchResults" must exist inside the data-controller element
  2. Fix typos and casing in the target attribute values — they must match the controller's target names exactly
  3. If search is intentionally omitted, gate initializeSearch on a feature flag instead of relying on missing markup
  4. Clear Turbo caches and CDN HTML after target renames so stale markup disappears

Example fix

<!-- before -->
<div data-controller="maps--maplibre">
  <input type="search" id="q"> <!-- no target attribute -->
</div>
<!-- after -->
<div data-controller="maps--maplibre">
  <input type="search" data-maps--maplibre-target="searchInput">
  <ul data-maps--maplibre-target="searchResults"></ul>
</div>
Defensive patterns

Strategy: validation

Validate before calling

const input = this.element.querySelector('[data-maps--maplibre-target="searchInput"]')
const results = this.element.querySelector('[data-maps--maplibre-target="searchResults"]')
if (!input || !results) {
  this.hideSearchAffordance() // keep the UI honest instead of a dead input
  return
}

Prevention

When it happens

Trigger: The search partial not rendered (feature flag off or a template variant without it); the target attribute typo'd or wrongly cased in markup; the elements present but outside the element carrying data-controller; cached old markup lingering after a rename.

Common situations: Custom themes overriding the map view without the search markup; upgrades renaming targets while Turbo/CDN caches serve stale HTML; layout changes nesting the search input in a different controller scope.

Related errors


AI-assisted analysis of Freika/dawarich@97fad417c5 (2026-08-21). Data as JSON: /api/errors/158799aa4ff167df. Report an issue: GitHub.