Alpine headless UI with Rails

[kirantpatil]

Hi,

I am trying to use Alpine headless UI with Rails 7 and I couldn't run headless UI.
Please let me know what mistake have I made.
Below are the steps I followed to run the headlessmodal

1. Followed bootrails tutorial to install alpine on Rails
   $ ./bin/importmap pin alpinejs --download
   $ ./bin/importmap pin @alpinejs/ui --download
   $ ./bin/importmap pin @alpinejs/focus --download

2. importmap.rb file contents:
   $ cat config/importmap.rb

   pin "application", preload: true
   pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
   pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
   pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
   pin_all_from "app/javascript/controllers", under: "controllers"
   pin "@alpinejs/ui", to: "@alpinejs--ui.js", preload: true # @3.10.3
   pin "@alpinejs/focus", to: "@alpinejs--focus.js", preload: true # @3.10.3
   pin "alpinejs", preload: true # @3.10.3

3. application.js file contents:
   $ cat app/javascript/application.js

   import "@hotwired/turbo-rails"
   import "controllers"

   import "@alpinejs/ui"
   import "@alpinejs/focus"
   import Alpine from "alpinejs"
   window.Alpine = Alpine

   document.addEventListener("DOMContentLoaded", function(event) {
   window.Alpine.start();
   });

4. index.html.erb file contains Modal contents without script tag

[kirantpatil]

I made the following changes to the application.js file and I could run it now but firefox and chromium browsers show different issues at the console.

I can open and close the Modal at Firefox but with Chromium, once I open and close it, I can't reopen it.

import "@hotwired/turbo-rails"
import "controllers"

import ui from "@alpinejs/ui"
import focus from "@alpinejs/focus"
import Alpine from "alpinejs"
window.Alpine = Alpine

Alpine.plugin(ui)
Alpine.plugin(focus)

document.addEventListener("DOMContentLoaded", function(event) {
window.Alpine.start();
});

System details

$ cat /etc/issue
Ubuntu 20.04.4 LTS \n \l

Firefox screenshot

Chromium screenshot