Modal with id dialog does not exist. Are you sure that the data-modal-target attribute points to the correct modal id?.

[barnaclebarnes]

I've got this as my HTML:

<div data-controller="modal">
  <dialog id="description-modal" data-modal-target="dialog" class="p-8 rounded-lg backdrop:bg-black/80">
    <div>
      <p>This modal dialog has a groovy backdrop!</p>
      <button data-action="modal#close" class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded">Close</button>
    </div>
  </dialog>
  <ol>
    <li>
      <button data-action="modal#open" data-modal-id="description-modal">Description</button>
    </li>
    <li>Tags</li>
  </ol>
</div>

But I'm getting an error:

Modal with id dialog does not exist. Are you sure that the data-modal-target attribute points to the correct modal id?.

As far as I can see, data-modal-target="dialog" is being set correctly. So not sure why I am getting that error? Any ideas?

[jaywhy]

That should work.

I don't think that error is coming from Stimulus. After a quick Google, it looks like it is an issue with Flowbite. Maybe there is some conflict if it also uses thedata-modal-target attribute.

https://github.com/themesberg/flowbite/blob/main/src/components/modal/index.ts