title: Why Am I Getting "Target Element Missing" Error?
body: <p>I'm getting an error in my Rails 6 app because it can't find my data-target, but I don't understand why.</p>
  <p>The error in Chrome’s console:</p>
  <pre><code>Uncaught Error: Missing target element &quot;channel.messages&quot;
  </code></pre>
  <p>My view:</p>
  <pre><code>&lt;div class=&quot;col-sm-10&quot; data-controller=&quot;channel&quot; data-channel-id=&quot;&lt;%= @channel.id %&gt;&quot;&gt;
    &lt;!-- Chat messages --&gt;
    &lt;div class=&quot;pr-6 py-4 flex-1&quot;&gt;
      &lt;div data-target=&quot;channel.messages&quot;&gt;
        &lt;%= render @channel.messages %&gt;
      &lt;/div&gt;
          &lt;div class=&quot;pb-6 pr-4 flex-none&quot;&gt;
            &lt;div class=&quot;flex rounded-lg border-2 border-grey overflow-hidden&quot;&gt;
              &lt;span class=&quot;text-3xl text-grey border-r-2 border-grey p-2&quot;&gt;
                &lt;svg class=&quot;fill-current h-6 w-6 block&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot;&gt;&lt;path d=&quot;M16 10c0 .553-.048 1-.601 1H11v4.399c0 .552-.447.601-1 .601-.553 0-1-.049-1-.601V11H4.601C4.049 11 4 10.553 4 10c0-.553.049-1 .601-1H9V4.601C9 4.048 9.447 4 10 4c.553 0 1 .048 1 .601V9h4.399c.553 0 .601.447.601 1z&quot;/&gt;&lt;/svg&gt;
              &lt;/span&gt;
              &lt;input type=&quot;text&quot; class=&quot;w-full px-4&quot; placeholder=&quot;Message &lt;%= @other_user.name %&gt;&quot; /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;%= form_with model: [@channel, Message.new], data: { action: &quot;ajax:success-&gt;channel#clearMessage&quot; } do |form| %&gt;
      &lt;%= form.text_field :body, class: &quot;form-control&quot;, data: { target: &quot;channel.newMessage&quot; } %&gt;
    &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>
  <p>_messages partial:</p>
  <pre><code>&lt;div&gt;
    &lt;div class=&quot;font-weight-bold&quot;&gt;&lt;%= message.user.name %&gt;&lt;/div&gt;
    &lt;div&gt;&lt;%= message.body %&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>my controller:</p>
  <pre><code>import { Controller } from &quot;stimulus&quot;
  import consumer from &quot;channels/consumer&quot;
  
  export default class extends Controller {
    static targets = [ &quot;messages&quot;, &quot;newMessage&quot; ]
  
    connect() {
      this.subscription = consumer.subscriptions.create({ channel: &quot;MessageChannel&quot;, id: this.data.get(&quot;id&quot;) }, {
        connected: this._connected.bind(this),
        disconnected: this._disconnected.bind(this),
        received: this._received.bind(this)
      })
    }
  
    disconnect() {
      consumer.subscriptions.remove(this.subscription)
    }
  
    _connected() {
    }
  
    _disconnected() {
    }
  
    _received(data) {
      if (data.message) {
        this.messagesTarget.insertAdjacentHTML('beforeend', data.message)
      }
    }
  
    clearMessage(event) {
      this.newMessageTarget.value = ''
    }
  }
  </code></pre>
  <p>When I inspect the HTML, it shows:</p>
  <pre><code>&lt;div data-target=&quot;channel.messages&quot;&gt;
  </code></pre>