Cannot read property of undefined issue

1

Doing a drag and drop with sortable. Using Rails 7, esbuild. When I drop after the drag I get the following error in chrome.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘dataset’)

import { Controller } from "@hotwired/stimulus"
import Sortable from "sortablejs"
import { put, get, post, patch, destroy } from "@rails/request.js"

export default class extends Controller {

  connect() {
    this.sortable = Sortable.create(this.element, {
      animation: 150,
      onEnd: this.updatePosition.bind(this)
    })
  }

  async updatePosition(event) {
    const response = await put('/projects', {
      body: JSON.stringify({
        sgid: event.project.dataset.sgid,
        position: event.newIndex + 1
      })
    })
    if (response.ok) {
      console.log(event.project.dataset.sgid)
    }
  }
}

list/show:

<ul data-controller="position">
  <% @list.projects.each do |project| %>
    <%= content_tag :li, data: { sgid: project.to_sgid_param } do %>
      <%= project.name %>
    <% end %>
  <% end %>
</ul>

The stimulus controller errors out on on this line:
sgid: event.project.dataset.sgid,

Any thoughts on what is going on?

2

Where are you expecting event.project to be defined?